当前位置：Gxlcms > css > 单纯使用CSS来实现预加载的动画效果代码讲解

单纯使用CSS来实现预加载的动画效果代码讲解

时间：2021-07-01 10:21:17 帮助过：30人阅读

本文给大家分享一段简单的代码实现css预加载动画效果，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

效果图

QQ截图20170907093352.png


  1. <style>
  2.     #loading {
  3.         position:absolute;
  4.         left:0;
  5.         top:0;
  6.         width:100%;
  7.         height:100%;
  8.         background: #121220;
  9.         overflow:hidden;
  10.         z-index:9999;
  11.     }
  12.     /*加载圈*/
  13.     .spinner {
  14.         margin:0 auto;
  15.         width:60px;
  16.         height:60px;
  17.         position:relative;
  18.         top:40%;
  19.     }
  20.     .container1 > p,.container2 > p,.container3 > p {
  21.         width:15px;
  22.         height:15px;
  23.         background-color:#fff;
  24.         border-radius:100%;
  25.         position:absolute;
  26.         -webkit-animation:bouncedelay 1.2s infinite ease-in-out;
  27.         animation:bouncedelay 1.2s infinite ease-in-out;
  28.         -webkit-animation-fill-mode:both;
  29.         animation-fill-mode:both;
  30.     }
  31.     .spinner .spinner-container {
  32.         position:absolute;
  33.         width:100%;
  34.         height:100%;
  35.     }
  36.     .container2 {
  37.         -webkit-transform:rotateZ(45deg);
  38.         transform:rotateZ(45deg);
  39.     }
  40.     .container3 {
  41.         -webkit-transform:rotateZ(90deg);
  42.         transform:rotateZ(90deg);
  43.     }
  44.     .circle1 {
  45.         top:0;
  46.         left:0;
  47.     }
  48.     .circle2 {
  49.         top:0;
  50.         right:0;
  51.     }
  52.     .circle3 {
  53.         right:0;
  54.         bottom:0;
  55.     }
  56.     .circle4 {
  57.         left:0;
  58.         bottom:0;
  59.     }
  60.     .container2 .circle1 {
  61.         -webkit-animation-delay:-1.1s;
  62.         animation-delay:-1.1s;
  63.     }
  64.     .container3 .circle1 {
  65.         -webkit-animation-delay:-1.0s;
  66.         animation-delay:-1.0s;
  67.     }
  68.     .container1 .circle2 {
  69.         -webkit-animation-delay:-0.9s;
  70.         animation-delay:-0.9s;
  71.     }
  72.     .container2 .circle2 {
  73.         -webkit-animation-delay:-0.8s;
  74.         animation-delay:-0.8s;
  75.     }
  76.     .container3 .circle2 {
  77.         -webkit-animation-delay:-0.7s;
  78.         animation-delay:-0.7s;
  79.     }
  80.     .container1 .circle3 {
  81.         -webkit-animation-delay:-0.6s;
  82.         animation-delay:-0.6s;
  83.     }
  84.     .container2 .circle3 {
  85.         -webkit-animation-delay:-0.5s;
  86.         animation-delay:-0.5s;
  87.     }
  88.     .container3 .circle3 {
  89.         -webkit-animation-delay:-0.4s;
  90.         animation-delay:-0.4s;
  91.     }
  92.     .container1 .circle4 {
  93.         -webkit-animation-delay:-0.3s;
  94.         animation-delay:-0.3s;
  95.     }
  96.     .container2 .circle4 {
  97.         -webkit-animation-delay:-0.2s;
  98.         animation-delay:-0.2s;
  99.     }
  100.     .container3 .circle4 {
  101.         -webkit-animation-delay:-0.1s;
  102.         animation-delay:-0.1s;
  103.     }
  104.     @-webkit-keyframes bouncedelay {
  105.         0%,80%,100% {
  106.             -webkit-transform:scale(0.0)
  107.         }
  108.         40% {
  109.             -webkit-transform:scale(1.0)
  110.         }
  111.     }
  112.     @keyframes bouncedelay {
  113.         0%,80%,100% {
  114.             transform:scale(0.0);
  115.             -webkit-transform:scale(0.0);
  116.     }
  117.         40% {
  118.             transform:scale(1.0);
  119.             -webkit-transform:scale(1.0);
  120.         }
  121.     }
  122. </style>
  123. <body>
  124.     <p id="loading" >
  125.         <p class="spinner">
  126.           <p class="spinner-container container1">
  127.             <p class="circle1"></p>
  128.             <p class="circle2"></p>
  129.             <p class="circle3"></p>
  130.             <p class="circle4"></p>
  131.           </p>
  132.           <p class="spinner-container container2">
  133.             <p class="circle1"></p>
  134.             <p class="circle2"></p>
  135.             <p class="circle3"></p>
  136.             <p class="circle4"></p>
  137.           </p>
  138.           <p class="spinner-container container3">
  139.             <p class="circle1"></p>
  140.             <p class="circle2"></p>
  141.             <p class="circle3"></p>
  142.             <p class="circle4"></p>
  143.           </p>
  144.         </p>
  145.     </p>
  146. </body>

以上就是单纯使用CSS来实现预加载的动画效果代码讲解的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！