CSS3实现动画加载效果
/* 定义基本的加载动画效果 */
.loading-effect {
width: 100px;
height: 100px;
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
/* 定义动画 */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}这段代码定义了一个简单的加载动画效果，通过CSS3的@keyframes规则创建了一个旋转动画，使得加载效果看起来像是在加载。通过将这个类应用到HTML元素上，可以实现这种旋转加载效果。
评论已关闭