省略号加载 · 加载
前端Wiki/CSS 特效合集/省略号加载

省略号加载

"加载中"后面的点点点循环出现,极简文字加载

← 返回 加载 类特效列表
加载中

上方为纯 CSS 实时演示,直接将鼠标移上去 / 点击感受效果

CSS 代码

CSS
.fx .elp{height:150px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#9aa7b8}
.fx .elp::after{content:"";animation:kfx-elp 1.5s steps(4,end) infinite}
@keyframes kfx-elp{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

HTML 结构

HTML
<div class="fx">
<div class="elp">加载中</div>
</div>
实现要点:content 属性逐帧切换 + steps 逐帧动画

其它加载类特效

回到 前端Wiki 首页 · CSS 特效合集