有没有办法用CSS动画来制作一个省略号？
有没有办法用CSS动画来制作一个省略号？
提问于 2012-10-22 23:36:07
我正在尝试有一个省略动画，并想知道这是否可能与CSS动画…
所以这可能就像
Loading...
Loading..
Loading.
Loading...
Loading..基本上就像这样继续下去。有什么想法吗？
回答 3
Stack Overflow用户
发布于 2019-01-24 23:03:47
这是一个很晚才添加的功能，但我找到了一个支持居中文本的方法。
<element>:after {
content: '\00a0\00a0\00a0';
animation: progress-ellipsis 5s infinite;
}
@keyframes progress-ellipsis {
0% {
content: '\00a0\00a0\00a0';
}
30% {
content: '.\00a0\00a0';
}
60% {
content: '..\00a0';
}
90% {
content: '...';
}
}Stack Overflow用户
发布于 2019-06-26 02:35:26
您可以设置clip动画(如果不需要IE支持，也可以使用更好的clip-path )
div {
position: relative;
display: inline-block;
font-size: 1.4rem;
}
div:after {
position: absolute;
margin-left: .1rem;
content: ' ...';
display: inline-block;
animation: loading steps(4) 2s infinite;
clip: rect(auto, 0px, auto, auto);
}
@keyframes loading {
to {
clip: rect(auto, 20px, auto, auto);
}
}<div>Loading</div>
Stack Overflow用户
发布于 2019-06-25 22:49:58
下面是我用纯css https://jsfiddle.net/pduc6jx5/1/解释的解决方案：https://medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc
scss
.dot1 {
animation: visibility 3s linear infinite;
}
@keyframes visibility {
0% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dot2 {
animation: visibility2 3s linear infinite;
}
@keyframes visibility2 {
0% {
opacity: 0;
}
21% {
opacity: 0;
}
22% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dot3 {
animation: visibility3 3s linear infinite;
}
@keyframes visibility3 {
0% {
opacity: 0;
}
43% {
opacity: 0;
}
44% {
opacity: 1;
}
65% {
opacity: 1;
}
66% {
opacity: 0;
}
100% {
opacity: 0;
}
}html
Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13014808
复制相关文章
相似问题