css 加载动画

作者：步崖发布日期:2025-11-05 浏览:114

/* CSS 加载动画示例 */

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader {
  border: 16px solid #f3f3f3; /* 设置加载动画的边框 */
  border-top: 16px solid #3498db; /* 设置顶部边框颜色 */
  border-radius: 50%; /* 将其变成圆形 */
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* 应用旋转动画 */
}

/* 解释说明：
这段代码创建了一个简单的加载动画。通过使用CSS的`@keyframes`规则定义了一个名为`spin`的动画，该动画从0度旋转到360度。
然后在`.loader`类中应用了这个动画，并设置了样式以创建一个带有彩色顶部边框的圆形元素。
最后，通过`animation`属性将`spin`动画应用到`.loader`元素上，使其无限循环并线性旋转。
*/

上一篇：css 定位居中

下一篇：css modules