css3原地一直旋转

CSS3提供了很多酷炫的特效，比如旋转。今天，我们就来学习一下如何让一个元素在原地一直旋转。

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    animation: rotate 2s infinite linear;
}
@keyframes rotate {
from {
    transform: rotate(0deg);
}
to {
    transform: rotate(360deg);
}
}
    

以上代码中，我们先定义了一个宽高为100px的蓝色方块，并将其定位为相对位置。接着，我们使用CSS3动画的关键帧声明@keyframes定义一个名为rotate的动画，它从0度旋转到360度，并无限循环播放。最后，我们将这个动画通过animation属性应用到.box元素上。

这样，我们就实现了一个在原地不停旋转的元素。可以将这个特效应用到很多场景，比如加载中的动画、菜单按钮等等。

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