这篇文章上次修改于 637 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
今天下午打开 小窝 日常添补日记内容的时候,发现 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 steps(2, start) infinite;
}
@keyframes text-loading-width {
0%{
width: .25em;
}
50%{
width: .5em;
}
100%{
width: .75em;
}
}
<p class="text-loading-width">奇趣保罗正在持续等待着一个心仪的人</p>
奇趣保罗正在持续等待着一个心仪的人
已有 4 条评论
https://blog.towavephone.com/css-world-four-kinds-of-box/#%E5%AE%9E%E7%8E%B0%E6%AD%A3%E5%9C%A8%E5%8A%A0%E8%BD%BD%E4%B8%AD可以利用 transform 位移实现,这个好点
@towave 总结的不错,我没看过完整的《CSS 新世界》,读一下你总结也有收获
我记得伪元素是双冒号来着
::after ::before
@橙梓 你说的对,:after 这种写法浏览器也支持,我一直都这样写,就没改过了