与旋转一定角度不同,这个是不停旋转。代码只有一句(针对块状元素):
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050}50%{-moz-transform:rotate(145deg);opacity:1}100%{-moz-transform:rotate(-320deg);opacity:0}} @-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}} @-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050}50%{-webkit-transform:rotate(145deg);opacity:1}100%{-webkit-transform:rotate(-320deg);opacity:0}} @-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}} @-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050}50%{-o-transform:rotate(145deg);opacity:1}100%{-o-transform:rotate(-320deg);opacity:0}} @-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(360deg)}} @-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050}50%{-ms-transform:rotate(145deg);opacity:1}100%{-ms-transform:rotate(-320deg);opacity:0}} @-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(360deg)}} animation: 1s linear 0s normal none infinite spinoffPulse;
主要用到infineite属性:动画无限循环.
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4513.html