首页 > 代码库 > CSS 实现加载动画之四-圆点旋转

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

2024-07-24 22:43:03   219人阅读

原文:CSS 实现加载动画之四-圆点旋转

圆点旋转也是加载动画中经常用到的。其实现方式和菊花旋转一样，只不过一个是线条形式，一个是圆点形式。圆点按照固定的旋转角度排列，加上延时的改变透明度的动画就可以实现。这个实现也比较简单。

 

1. 动画截图

 

 

2. 案例源代码

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title>CSS3实现加载的动画效果4</title> 6 <meta name="author" content="rainna" /> 7 <meta name="keywords" content="rainna‘s css lib" /> 8 <meta name="description" content="CSS3" /> 9 <style>10 *{margin:0;padding:0;}11 12 .m-load,.m-load2{width:100px;height:100px;margin:100px auto 0;background:url(‘load.png‘) top center no-repeat;}13 .m-load2{background:green;}14 15 /** 加载动画的静态样式 **/16 .m-load2{position:relative;}17 .m-load2 .item{position:absolute;left:50%;top:0;width:14px;height:100%;margin-left:-7px;}18 .m-load2 .item:before,.m-load2 .item:after{content:‘‘;display:block;width:14px;height:14px;border-radius:14px;background:#fff;}19 .m-load2 .item:after{position:absolute;bottom:0;}20 .m-load2 .item:nth-child(2){-webkit-transform:rotate(45deg);}21 .m-load2 .item:nth-child(3){-webkit-transform:rotate(90deg);}22 .m-load2 .item:nth-child(4){-webkit-transform:rotate(135deg);}23 24 /** 加载动画 **/25 @-webkit-keyframes load{26     0%{opacity:0;}27     100%{opacity:1;}28 }29 .m-load2 .item:nth-child(1):before{-webkit-animation:load 0.8s linear 0.7s infinite;}30 .m-load2 .item:nth-child(2):before{-webkit-animation:load 0.8s linear 0.6s infinite;}31 .m-load2 .item:nth-child(3):before{-webkit-animation:load 0.8s linear 0.5s infinite;}32 .m-load2 .item:nth-child(4):before{-webkit-animation:load 0.8s linear 0.4s infinite;}33 .m-load2 .item:nth-child(1):after{-webkit-animation:load 0.8s linear 0.3s infinite;}34 .m-load2 .item:nth-child(2):after{-webkit-animation:load 0.8s linear 0.2s infinite;}35 .m-load2 .item:nth-child(3):after{-webkit-animation:load 0.8s linear 0.1s infinite;}36 .m-load2 .item:nth-child(4):after{-webkit-animation:load 0.8s linear 0s infinite;}37 </style>38 </head>39 40 <body>41 <div class="m-load"></div>42 43 <div class="m-load2">44     <div class="item"></div>45     <div class="item"></div>46     <div class="item"></div>47     <div class="item"></div>48 </div>49 </body>50 </html>

 

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


联系
我们