CSS实现弹簧效果的旋转加载动画

2020-05-06 09:21:52易采站长站整理

#loader2:after {     
  border-radius: 50%;     
}     
#loader2:before,     
#loader2:after {     
   position: absolute;     
   content: ”;     
}     
#loader2:before {     
  width: 5.2em;     
  height: 10.2em;     
  background: #ffffff;     
  border-radius: 10.2em 0 0 10.2em;     
  top: -0.1em;     
  left: -0.1em;     
  -webkit-transform-origin: 5.2em 5.1em;     
  transform-origin: 5.2em 5.1em;     
  -webkit-animation: load2 2s infinite ease 1.5s;     
  animation: load2 2s infinite ease 1.5s;     
 }     
 #loader2 {     
   font-size: 11px;     
   text-indent: -99999em;     
   margin: 20px 20px;     
   position: relative;     
   float: left;     
   width: 10em;     
   height: 10em;     
   box-shadow: inset 0 0 0 1em #ff0f88;     
 }     
 #loader2:after {     
   width: 5.2em;     
   height: 10.2em;     
   background: #ffffff;     
   border-radius: 0 10.2em 10.2em 0;     
   top: -0.1em;     
   left: 5.1em;     
   -webkit-transform-origin: 0px 5.1em;     
   transform-origin: 0px 5.1em;     
   -webkit-animation: load2 2s infinite ease;     
   animation: load2 2s infinite ease;     
  }     
  @-webkit-keyframes load2 {     
     0% {