css CSS3加载图标/微调器

Posted 2021-05-13

.load {
   height:100px;
   width:100px;
   margin:0 auto;
   position:relative;
   -webkit-animation: rotation 1s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border:6px solid rgba(236,30,39,.25);
   border-radius:100%;
   }
.load:before {
   content:"";
   height:100%;
   width:100%;
   left:-6px;
   top:-6px;
   position:absolute;
   display:block;
   border-top:6px solid rgba(236,30,39,.9);
   border-left:6px solid transparent;
   border-bottom:6px solid transparent;
   border-right:6px solid transparent;
   border-radius:100%;
}
@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}