css动画div一直旋转 |css左右摆动代码

div {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

上述代码中，大家首先定义了一个100px x 100px的div，并将其背景色设置为红色。然后大家定义了一个名为“rotate”的动画，它将使该div元素根据定义的时间、动画方式和循环次数无限旋转。在此之后，大家定义了实现旋转动画的CSS关键帧（keyframes）。“from”将设置元素的初始状态为0度角，而“to”则将元素旋转360度角，即一个完整的圆圈。

通过这样的CSS代码，大家可以为网页元素添加生动的效果。同时，CSS动画还可以与JavaScript等其他技术相结合，实现更加复杂的动画效果。