html – CSS动画,从结尾开始重复的省略号

发布时间：2020-12-14 18:28:06 所属栏目：资源来源：网络整理

导读：我有一个非常简单的动画设置,以显示加载三个点.我从周围得到了一堆,并选择了最简单的一个.我遇到的问题是它从0开始就像它被告知的那样.我需要它从头开始. CSS： .loading { font-size: 30px;}.loading:after { overflow: hidden; display: inline-block; ver

我有一个非常简单的动画设置,以显示加载三个点.我从周围得到了一堆,并选择了最简单的一个.我遇到的问题是它从0开始就像它被告知的那样.我需要它从头开始.

CSS：

.loading {
  font-size: 30px;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;   
  /* animation: ellipsis-dot steps(40,start) 9000ms infinite; */
  animation: ellipsis-dot 1s infinite;
  animation-fill-mode: fowards;
  content: "2026"; /* ascii code for the ellipsis character */
  width: 0em;
}

@keyframes ellipsis {
  to {    width: 1.25em;  }
}

这是一个fiddle.

我将这些显示在一张桌子上,其中有100张一起显示.这一切都从完全空洞开始.我需要他们从3点开始.然后转到0然后立即执行它正在做的事情.

注意：持续时间9000实际上是900.在我操作小提琴后,它会减慢以强调动画的开始.

解决方法

.loading {
  font-size: 30px;
}

.loading:after {
  content: "...";
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis-dot 1s infinite .3s;
  animation-fill-mode: fowards;
  width: 1.25em;
}

@keyframes ellipsis-dot {
  25% {
    content: "";
  }
  50% {
    content: ".";
  }
  75% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

<div class="loading">Loading</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!