css3实现省略号动画

2020-04-24187次阅读css模块

实现省略号点点动画,纯css3实现省略号动画。

上传中<span class="dot">...</span>
.dot {
    font-family: simsun;
    animation: dot 3s infinite step-start;
}

:root .dot{
    display: inline-block;
    width: 1.5em;
    vertical-align: bottom;
    overflow: hidden;
}

@keyframes dot {
    0% { width: 0; margin-right: 1.5em; }
    33% { width: .5em; margin-right: 1em; }
    66% { width: 1em; margin-right: .5em; }
    100% { width: 1.5em; margin-right: 0;}
}

 

上一篇: React弹出层组件一  下一篇: File.type部分浏览器返回为空字符串  

css3实现省略号动画相关文章