环境
- win10
- vscode
- vue2.x
代码
<div class="dot">
动态省略号
<span class="dot-ani"></span>
</div>
<style>
.dot-ani {
display: inline-block;
height: 12px;
line-height: 12px;
overflow: hidden;
}
.dot-ani::after {
display: inline-table;
white-space: pre;
content: "\A.\A..\A...";
animation: spin 2s steps(4) infinite;
}
@keyframes spin {
to{
-webkit-transform:translateY(-48px);
transform:translateY(-48px)
}
}
</style>