CSS实现的 Loading 效果

/* 定义加载动画的基本样式 */
.loading-animation {
    width: 50px;
    height: 50px;
    border: 6px solid #f3f3f3; /* 边框颜色与背景色相近，看起来就像是在加载 */
    border-top: 6px solid #3498db; /* 顶部边框颜色，可以改成你喜欢的颜色 */
    border-radius: 50%; /* 边框圆角，形成圆形 */
    animation-name: spin; /* 使用@keyframes定义的动画名称 */
    animation-duration: 20s; /* 动画持续时间 */
    animation-iteration-count: infinite; /* 动画无限次数播放 */
    animation-timing-function: linear; /* 动画速度时间函数 */
    margin: 50px 0; /* 外边距，使得动画在页面中垂直居中 */
}
 
/* 定义旋转动画 */
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

这段代码定义了一个简单的加载动画，通过旋转边框来模拟加载效果。你可以将这个类应用到任何HTML元素上，使其展现出旋转的加载动画。这是一个很好的教学示例，展示了如何使用CSS创建交互式动画效果。