用CSS实现LOADING省略号动画

liushicen

于 2015-06-18 10:27:21 发布

阅读量6.6k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/u014034575/article/details/46544969

版权

css 专栏收录该内容

4 篇文章

订阅专栏

这段CSS代码使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果。

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}