[CSS3]块状元素不停旋转

与旋转一定角度不同,这个是不停旋转。代码只有一句(针对块状元素):

@-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属性:动画无限循环.

赞(0)