我正在尝试有一个省略动画,并想知道这是否可能与CSS动画…
所以这可能就像
Loading...
Loading..
Loading.
Loading...
Loading..
基本上就像这样继续下去。有什么想法吗?
发布于 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: '...';
}
}
发布于 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>
发布于 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>
https://stackoverflow.com/questions/13014808
复制相似问题