css3实现无限旋转360度

工作中遇到需要无限旋转360度的loading圈,亲测下面css样式可用。

@-webkit-keyframes animal {
  0%{
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
  }
  100%{
    transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}
.icon {
  -webkit-animation: animal 1s infinite linear ;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}


版权声明:本文为dreamcarp原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。