CSS 实现加载动画之八-圆点旋转

时间：2022-07-03 18:04:13

这篇文件介绍的动画是QQ邮箱APP里的加载动画，效果类似，但是不完全一样。实现过程不复杂，这里不详细解释了，直接上源码。另外还有一种实现方式，利用元素的3D转换加平移。

1. 先看截图

CSS 实现加载动画之八-圆点旋转

2. 源代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

 <title>CSS3实现加载的动画效果8</title>

 <meta name="author" content="rainna" />

 <meta name="keywords" content="rainna's css lib" />

 <meta name="description" content="CSS3" />

 <style>

 *{margin:0;padding:0;}

 body{background:#f0f0f0;}

 .m-load{height:280px;background:url('load.png') center top no-repeat;}

 /** 加载动画的静态样式 **/

 .m-load2{position:relative;width:60px;height:20px;margin:100px auto;}

 .m-load2:before,.m-load2:after,.m-load2 .item{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:10px;}

 .m-load2:before{content:'';background:#ABF509;}

 .m-load2:after{content:'';background:#FDD308;}

 .m-load2 .item{background:#f2574b;}

 /** 加载动画 **/

 @-webkit-keyframes load{

     0%{z-index:1;}

     25%{-webkit-transform:translateX(20px) scale(1.3);}

     50%{-webkit-transform:translateX(40px);}

     75%{-webkit-transform:translateX(20px);}

 }

 .m-load2:before{-webkit-animation:load 1.2s linear infinite;}

 .m-load2 .item{-webkit-animation:load 1.2s linear 0.3s infinite;}

 .m-load2:after{-webkit-animation:load 1.2s linear 0.6s infinite;}

 </style>

 </head>

 <body>

 <div class="m-load"></div>

 <div class="m-load2">

     <div class="item"></div>

 </div>

 </body>

 </html>

相关文章