CSS实现省略号动画效果

CSS实现省略号动画效果

上代码：

<div class="loadpos">等待支付中</div>

CSS部分：

.loadpos{

        width: 220px;

        font-size: 24px;

        font-weight: 500;

        color: rgba(0,0,0,0.88);

        line-height: 33px;

}

.loadpos:after {

        overflow: hidden;

        display: inline-block;

        vertical-align: bottom;

        -webkit-animation: ellipsis steps(4,end) 900ms infinite;

        animation: ellipsis steps(4,end) 900ms infinite;

        content: "\2026"; /* ascii code for the ellipsis character */

        width: 0px;

}

@keyframes ellipsis {

        to {

            width: 1.25em;

        }

}

@-webkit-keyframes ellipsis {

        to {

            width: 1.25em;

        }

}