CSS实现图片动态旋转

话不多话,直接上代码

@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实现图片动态旋转)