css动画之旋转

最新推荐文章于 2025-03-18 20:02:11 发布

徐扬_前端小白的成长之路

最新推荐文章于 2025-03-18 20:02:11 发布

阅读量328

点赞数

分类专栏： CSS 文章标签： CSS3动画

本文链接：https://blog.youkuaiyun.com/weixin_36302575/article/details/84871968

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

顺时针旋转样式

/* clockwise 换成想要旋转的盒子名就OK啦 */
.clockwise{
 	-webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate1 3s linear infinite;
        -moz-animation: rotate1 3s linear infinite;
        -o-animation: rotate1 3s linear infinite;
        animation: rotate1 3s linear infinite;
}
@-webkit-keyframes rotate1{
 	from{-webkit-transform: rotate(0deg)}
        to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate1{
 	from{-moz-transform: rotate(0deg)}
        to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate1{
 	from{-o-transform: rotate(0deg)}
        to{-o-transform: rotate(359deg)}
}
@keyframes rotate1{
 	from{transform: rotate(0deg)}
        to{transform: rotate(359deg)}
}

逆时针旋转样式

/* anticlockwise 换成想要旋转的盒子名就OK啦 */
.anticlockwise{
     -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 1s;
        -moz-transition-property: -moz-transform;
        -moz-transition-duration: 1s;
        -webkit-animation: rotate2 3s linear infinite;
        -moz-animation: rotate2 3s linear infinite;
        -o-animation: rotate2 3s linear infinite;
        animation: rotate2 3s linear infinite;
}
@-webkit-keyframes rotate2{
     from{-webkit-transform: rotate(0deg)}
        to{-webkit-transform: rotate(-360deg)}
}
@-moz-keyframes rotate2{
     from{-moz-transform: rotate(0deg)}
        to{-moz-transform: rotate(-359deg)}
}
@-o-keyframes rotate2{
     from{-o-transform: rotate(0deg)}
        to{-o-transform: rotate(-359deg)}
}
@keyframes rotate2{
     from{transform: rotate(0deg)}
        to{transform: rotate(-359deg)}
}