其他代码

炫酷CSS3预加载loading样式

创客主机

炫酷CSS3预加载loading样式-创客云
这是两款炫酷的 css3 loading 预加载样式。该 css3 loading 预加载样式通过简单的布局和 CSS 代码,来制作效果非常炫酷的 loading 预加载特效。

使用方法

在页面中引入 bootstrap 文件。

也想出现在这里?联系我们
宝塔
  1. <link rel="stylesheet" href="bootstrap.min.css">

HTML 结构

第一个 loading 效果的基本 HTML 结构如下。

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="preloader">
  5.                 <div class="loader loader-inner-1">
  6.                     <div class="loader loader-inner-2">
  7.                         <div class="loader loader-inner-3">
  8.                         </div>
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>
  14. </div>

第二个 loading 效果的基本 HTML 结构如下。

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <div class="preloader">
  5.                 <div class="loader"></div>
  6.             </div>
  7.         </div>
  8.     </div>
  9. </div>

CSS 样式

第一个 loading 效果的 CSS 样式如下。

  1. .preloader{
  2.     height: 100%;
  3.     width: 100%;
  4.     padding: 20px 0 20px;
  5.     display: flex;
  6.     flex-flow: column wrap;
  7.     justify-content: center;
  8.     align-content: center;
  9.     align-items: center;
  10.     perspective: 700;
  11. }
  12. .loader{
  13.     text-align: center;
  14.     margin: 5px;
  15.     border-radius: 50%;
  16.     border: 4px solid #fff;
  17.     display: flex;
  18.     flex-flow: column wrap;
  19.     justify-content: center;
  20.     align-content: center;
  21.     align-items: center;
  22.     transform-style: preserve-3d;
  23.     position: relative;
  24. }
  25. .loader-inner-1{
  26.     animation-delay: 0.2s;
  27.     animation: change_first_circle 2s ease-in-out infinite;
  28. }
  29. .loader-inner-2{
  30.     animation-delay: 0.2s;
  31.     animation: change_second_circle 2s ease-in-out infinite;
  32. }
  33. .loader-inner-3{
  34.     animation-delay: 0.2s;
  35.     width: 100px;
  36.     height: 100px;
  37.     animation: change_last_circle 3s linear  infinite;
  38. }
  39. @keyframes change_first_circle {
  40.     50%{ transform: rotateX(360deg) scale(0.8); }
  41. }
  42. @keyframes change_second_circle {
  43.     50%{ transform: rotateY(360deg) scale(0.8); }
  44. }
  45. @keyframes change_last_circle {
  46.     50%{ transform: rotateX(360deg) scale(0.8); }
  47. }

第二个 loading 效果的 CSS 样式如下。

  1. .preloader{
  2.     height: 100px;
  3.     width: 100px;
  4.     margin: 30px auto 0;
  5.     position: relative;
  6. }
  7. .loader{
  8.     background-color: #fff;
  9.     width: 5px;
  10.     height: 5px;
  11.     border-radius: 50px;
  12.     position: relative;
  13.     top: calc(50% - 2.5px);
  14.     left: calc(50% - 2.5px);
  15. }
  16. .loader:before,
  17. .loader:after{
  18.     content: "";
  19.     background: linear-gradient(45deg,transparent,rgba(255, 255, 255, .3),rgba(255, 255, 255, .3),transparent);
  20.     width: 50px;
  21.     height: 50px;
  22.     border-top: 3px solid #fff;
  23.     border-right: 3px solid #fff;
  24.     border-radius: 0 50px 0px 0;
  25.     transform-origin:  0% 100%;
  26.     position: absolute;
  27.     top: -47px;
  28.     animation: loader 1s linear infinite;
  29. }
  30. .loader:after{
  31.     border-top: none;
  32.     border-right: none;
  33.     border-bottom: 3px solid #fff;
  34.     border-left: 3px solid #fff;
  35.     border-radius: 0 0px 0px  50px;
  36.     transform-origin:  100% 0%;
  37.     top: 2px;
  38.     right: 2px;
  39. }
  40. @keyframes loader{
  41.     0%{ transform:rotate(0deg); }
  42.     100%{ transform:rotate(360deg); }
  43. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!