[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属性:动画无限循环.一起让图标转起来吧

发表评论