css动画旋转效果代码

CSS动画旋转效果是网页设计中经常使用的效果之一，它可以让页面更加生动和有趣。下面是一些常见的CSS动画旋转效果的代码示例。

/* 1. 旋转动画 */.rotate {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}
@-webkit-keyframes rotate {
0% {
     -webkit-transform: rotate(0deg);
 }
100% {
     -webkit-transform: rotate(360deg);
 }
}
@keyframes rotate {
0% {
     transform: rotate(0deg);
 }
100% {
     transform: rotate(360deg);
 }
}

上述代码可以让元素无限旋转，通过调整动画持续时间和旋转角度可以实现不同的效果。

/* 2. 悬停旋转 */.hover-rotate:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

上述代码可以让鼠标悬停在元素上时出现旋转效果。

/* 3. 旋转和放大缩小 */.scale-rotate {
    -webkit-animation: scale-rotate 1s linear infinite;
    animation: scale-rotate 1s linear infinite;
}
@-webkit-keyframes scale-rotate {
0% {
     -webkit-transform: scale(1);
 }
50% {
     -webkit-transform: scale(1.2) rotate(180deg);
 }
100% {
     -webkit-transform: scale(1) rotate(360deg);
 }
}
@keyframes scale-rotate {
0% {
     transform: scale(1);
 }
50% {
     transform: scale(1.2) rotate(180deg);
 }
100% {
     transform: scale(1) rotate(360deg);
 }
}
    

上述代码可以让元素同时进行旋转和放大缩小的动画效果。

CSS动画旋转效果可以通过调整动画持续时间、旋转角度、放大缩小比例等参数实现不同的效果和动感。使用这些代码可以让网页更加生动有趣，提高用户体验。

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