css动画围绕中心旋转 |js css 合同展开折叠

/* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 定义需要进行动画的HTML元素 */
div {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
animation: rotate 2s linear infinite;
}

上面的代码中，大家首先定义了一个名为“rotate”的旋转动画，从0度旋转到360度。然后，大家定义了一个div元素，设置了它的宽、高和背景颜色，并将其水平居中显示。最后，大家将这个div元素应用了大家刚刚定义的旋转动画，总共旋转2秒，并且循环无限次。

当大家将上面的代码放到HTML文件中运行时，就能看到一个围绕中心旋转的红色正方形。通过不断地调整上述代码中animation属性的值，大家还可以改变旋转速度和循环次数，来达到更理想的旋转效果。