利用CSS3简单实现加载中效果

莫亓

于 2019-10-21 13:51:43 发布

阅读量333

点赞数

分类专栏：是干货呀 Vue网站局部实现文章标签： css 加载中

本文链接：https://blog.youkuaiyun.com/Bule_daze/article/details/102662568

版权

是干货呀同时被 2 个专栏收录

40 篇文章

订阅专栏

Vue网站局部实现

19 篇文章

订阅专栏

本文介绍了如何使用CSS3的animation属性来简单实现各种加载中的效果，通过实例展示了CSS3在创建动态加载动画方面的强大能力。同时，提到了content属性在特定场景下的应用。

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

<template>
  <p class="demo">加载中</p>
</template>

.demo:after{
	content: "."
}
.demo:after {
  animation: dot 3s linear infinite;
}

@keyframes dot {
  0% {
    content: ".";
  }

  33% {
    content: "..";
  }

  66% {
    content: "...";
  }

  100% {
    content: "";
  }
}

animation

效果图：

? 参考链接：

CSS 属性 content 的使用场景