css中动画循环播放 |css 计算元素的长度

/* 定义一个循环播放的动画 */
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 将动画应用到元素上 */
div {
animation: spin 2s linear infinite;
}

上面的CSS代码中大家定义了一个名为spin的动画，它的作用是使元素在两秒内顺时针旋转360度。大家将这个动画通过animation属性应用到一个div元素上，并设置了无限循环播放。

需要注意的是，在这个动画名称前加上“@keyframes”可以定义一个关键帧动画。在动画执行过程中，大家通过关键帧来定义动画的具体形态，如上面的代码中大家定义了元素在0%和100%的关键帧状态，使它们最终呈现出完全不同的形态。

除此之外，大家使用了animation属性来将刚刚定义的动画应用到元素上。其中“spin”表示要应用的动画名称，“2s”表示动画的时长，linear表示动画的速度类型，infinite表示动画的循环次数无限制。

这样，大家就成功地创建了一个CSS动画，并实现了循环播放。你可以修改动画名称、关键帧或循环次数等属性，来探索不同的动画效果。