CSS3实现大小不一的粒子旋转加载动画

2020-05-05 07:34:30易采站长站整理

先看看效果图,像是气泡在上升:

CSS Code复制内容到剪贴板

#load3,     
#loader3 {     
 font-size: 20px;     
 margin: 80px 50px;     
 float: left;     
 width: 1em;     
 height: 1em;     
 border-radius: 50%;     
 position: relative;     
 text-indent: -9999em;     
 -webkit-animation: load3 1.3s infinite linear;     
 animation: load3 1.3s infinite linear;     
}     
@-webkit-keyframes load3 {     
   0%,     
   100% {     
     box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,     
                 3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
                 0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
                 -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;     
   }     
   12.5% {     
     box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
                 3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
                 0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
                 -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
   }     
   25% {     
      box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,