使用css实现省略号加载动画

最新推荐文章于 2024-01-25 14:36:26 发布

Krlin_

最新推荐文章于 2024-01-25 14:36:26 发布

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习文章标签： css 动画 javascript

原文链接：https://www.jianshu.com/p/f8080d8c700d

学习专栏收录该内容

93 篇文章

订阅专栏

本文介绍了如何在Vue2.x环境下，利用CSS实现一个动态省略号的动画效果。通过设置CSS样式和关键帧动画，创建了一个在div内滚动的省略号效果，适用于网页加载提示或者信息展示等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

环境

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>