css3 转动动画

CSS3转动动画是一种非常流行的动画效果，它可以使你的网站变得更加生动和有趣。在本文中，我们将学习如何使用CSS3来创建转动动画。

.rotate{
    -webkit-animation:rotate 2s linear infinite;
    -moz-animation:rotate 2s linear infinite;
    -ms-animation:rotate 2s linear infinite;
    -o-animation:rotate 2s linear infinite;
    animation:rotate 2s linear infinite;
}
@keyframes rotate{
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotate{
from {
    -moz-transform: rotate(0deg);
}
to {
    -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotate{
from {
    -webkit-transform: rotate(0deg);
}
to {
    -webkit-transform: rotate(360deg);
}
}
@-ms-keyframes rotate{
from {
    -ms-transform: rotate(0deg);
}
to {
    -ms-transform: rotate(360deg);
}
}
@-o-keyframes rotate{
from {
    -o-transform: rotate(0deg);
}
to {
    -o-transform: rotate(360deg);
}
}
    

上面的代码用到了CSS3中的@keyframes和transform属性。@keyframes可以定义CSS动画的过渡效果，而transform属性可以对元素进行旋转、平移、缩放等变换操作。

我们首先定义了一个.rotate类，将动画效果应用在它上面。然后定义了@keyframes rotate，实现了一个从0度到360度的旋转动画。最后，我们在各自的浏览器厂商前缀下定义了相应的动画。

将上面的代码应用到你的网页中，你就可以得到一个漂亮的转动动画效果了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！