加载中点点点动画 css animation

最新推荐文章于 2023-12-11 14:55:39 发布

qq_34491588

最新推荐文章于 2023-12-11 14:55:39 发布

阅读量464

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_34491588/article/details/117663919

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS动画创建一个动态的加载中效果，通过点点点的连续变化展示页面加载状态。详细讲解了关键帧动画的设置和应用，帮助开发者实现更丰富的用户体验。

摘要由CSDN通过智能技术生成

.animation_dot {
    display: inline-block;
    width: 24px;
    vertical-align: top;
    overflow: hidden;
    font-size: 30px;
    line-height: 26px;
    font-weight: 500;
    margin-left: 4px;
}

@keyframes dot {
    0% { width: 0; margin-right: 24px; }
    33% { width: 8px; margin-right: 16px; }
    66% { width: 16px; margin-right: 8px; }
    100% { width: 24px; margin-right: 0 }
}

@-moz-keyframes dot {
    0% { width: 0; margin-right: 24px; }
    33% { width: 8px; margin-right: 16px; }
    66% { width: 16px; margin-right: 8px; }
    100% { width: 24px; margin-right: 0 }
}

@-webkit-keyframes dot {
    0% { width: 0; margin-right: 24px; }
    33% { width: 8px; margin-right: 16px; }
    66% { width: 16px; margin-right: 8px; }
    100% { width: 24px; margin-right: 0 }
}

.animation_dot {
    animation: dot 3s infinite step-start;
    -moz-animation: dot 3s infinite step-start;
    -webkit-animation: dot 3s infinite step-start;
}