7

CSS 实现单行文字加载效果

 2 years ago
source link: https://paugram.com/coding/css-text-loading-effect.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

CSS 实现单行文字加载效果

2021.12.05 进击的码农 0 88

今天下午打开 小窝 日常添补日记内容的时候，发现 Vite 新版后台的一言加载效果太生硬了，只有“一言加载中...”的静态效果，我就在想，能不能让三个小点点变成动态的呢？

大多数开发者的第一直觉恐怕都是使用 JS 结合 setInterval 来完成吧，换个角度思考下，其实 CSS 就能支持这个效果，使用动画就可以，只是动画改变的项目是伪元素的 content 属性。

此前一直以为这种非外观的属性无法实现，谁知道今天一时好奇就给整出来了，哈哈哈，Web 开发就是会给人很多无数的惊喜啊。

.text-loading:after{
  content: "...";
  animation: text-loading 2s infinite;
}

@keyframes text-loading {
  25%{
    content: ".";
  }
  50%{
    content: "..";
  }
  100%{
    content: "...";
  }
}
<p class="text-loading">奇趣保罗正在持续等待着一个心仪的人</p>

只需要一个类名就能搞定，很方便吧！到时候很有可能会将这个功能预设在 奇趣框架 里面！

奇趣保罗正在持续等待着一个心仪的人

目前发现，Safari 全系均不支持这个效果，太蛋疼了。我倒是想到了另外一个实现的方法，改变块的 Width 就行，同样是使用 CSS3 动画实现，显然这样做没第一个方法那么优雅。

.text-loading-width:after{
  content: "...";
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
  animation: text-loading-width 2s infinite linear;
}

@keyframes text-loading-width {
  25%{
    width: .25em;
  }
  100%{
    width: .5em;
  }
}
<p class="text-loading-width">奇趣保罗正在持续等待着一个心仪的人</p>

奇趣保罗正在持续等待着一个心仪的人

Paul

特立独行的一只前端菜狗。本站未注明转载的文章均为原创，并采用 CC BY-NC-SA 4.0 授权协议，转载请注明来源，谢谢！如本站内容对你有所帮助的话，不妨 捐助支持 一下？同时欢迎订阅关注 我的日记，唠嗑（分享）每日的折腾经历。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK