css3动画----实现动态省略号 ...

最新推荐文章于 2024-07-10 11:57:20 发布

weixin_33939380

最新推荐文章于 2024-07-10 11:57:20 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/webzwf/p/5898762.html

本文介绍了一种使用纯CSS3实现动态省略号的方法。通过定义关键帧动画，可以使省略号(...)逐渐展开和收缩，营造出动感效果。这种方法不需要JavaScript支持，适用于希望简化网页加载过程并保持良好视觉体验的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h3>实现省略号点点动，纯css3实现动态省略号</h3>
上传中<span class="dot">...</span>

【css代码如下】

<style>

.dot {
font-family: simsun;
}
:root .dot {
display: inline-block;
width: 1.5em;
vertical-align: bottom;
overflow: hidden;
}
@-webkit-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;}
}
.dot {
-webkit-animation: dot 3s infinite step-start;
}

@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;}
}
.dot {
animation: dot 3s infinite step-start;
}
</style>

转载于:https://www.cnblogs.com/webzwf/p/5898762.html