美文网首页
CSS实现图片动态旋转

CSS实现图片动态旋转

作者: ShineYangGod | 来源:发表于2019-05-07 09:20 被阅读0次

话不多话,直接上代码

@keyframes rotate {
    0%{
        transform:rotate(0deg);
        -ms-transform:rotate(0deg);     /* IE 9 */
        -moz-transform:rotate(0deg);    /* Firefox */
        -o-transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        -ms-transform:rotate(360deg);   /* IE 9 */
        -moz-transform:rotate(360deg);  /* Firefox */
        -o-transform:rotate(360deg);    
    }
}
@-webkit-keyframes rotate{
    0%{
        -moz-transform: rotate(0deg);
    }
    100%{
        -moz-transform: rotate(360deg);
    }
}
在需要的地方调用
.refresh-animation {
    animation: rotate 4s infinite;
    -webkit-animation: rotate 1s infinite; /*Safari and Chrome*/ 
}

相关文章

网友评论

      本文标题:CSS实现图片动态旋转

      本文链接:https://www.haomeiwen.com/subject/fdpsoqtx.html