伪元素实现打点 loading 效果
Sonder
2020-12-17
692字
2分钟
浏览 (3.6k)
关键点
- 非常有意思，借助动画操控伪元素的 content
一看就懂：
HTML：
<p>加载中</p>SCSS：
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 6vw;
line-height: 8vw;
}
p::after {
content: "";
position: absolute;
top: 0%;
bottom: 0;
animation: dot 3s infinite steps(3, start);
line-height: 9vw;
}
@keyframes dot {
33.33% {
content: ".";
}
66.67% {
content: "..";
}
100% {
content: "...";
}
}