css实现动态旋转

最新推荐文章于 2025-10-17 18:19:21 发布

原创最新推荐文章于 2025-10-17 18:19:21 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS动画和变换(transform)属性实现一个按钮在被点击时动态旋转的效果。通过定义关键帧动画并应用于按钮元素，使得按钮可以在0度到360度间平滑旋转，从而达到视觉上的动态效果。

需求：刷新按钮点击后，动态旋转

1.代码

.refresh-animation {
    animation: rotate 4s infinite;
    -webkit-animation: rotate 1s infinite; /*Safari and Chrome*/ 
}

@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);
    }
}

$(this).addClass("refresh-animation");
$(this).removeClass("refresh-animation");

2.讲解

[animation](http://www.w3school.com.cn/cssref/pr_animation.asp)
[transform](http://www.w3school.com.cn/cssref/pr_transform.asp)
注意animation的animation-name属性(此例:rorate)必须与@keyframes ratote{}中的 ratote一致