css3 实现360度无线旋转

使用css3 属性方法 rotate() 实现旋转

.icon {
  -webkit-animation: animal 1s infinite linear ;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
}
@-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);
  }
}

transform-origin是规定如何旋转
: center center;为以围绕中心点旋转;
top left; 以围绕左上角旋转;
top right; 以围绕右上角旋转;

你可能感兴趣的:(css3 实现360度无线旋转)