CSS3旋转动画(平滑 无限循环)

CSS3旋转动画

/* 旋转动画 指定class为trun即可使用*/.turn {animation: turn 10s linear infinite;}/* turn : 定义的动画名称10s : 动画时间linear : 动画平滑infinite :使动画无限循环transform:rotate(旋转角度)%0:动画开始%100:动画结束*/@keyframes turn {0% {transform: rotate(0deg);}20% {transform: rotate(72deg);}40% {transform: rotate(144deg);}60% {transform: rotate(216deg);}80% {transform: rotate(288deg);}100% {transform: rotate(360deg);}}

动画效果