searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

简单css实现 点点点 的加载动画效果

2024-07-10 09:44:30
56
0

有没有想过,在文字中的点点点加载效果是怎么实现的呢,下面几句代码就能完成,简单易用好实现。

 

<!-- 页面内容 index.html -->
<!DOCTYPE html>
<html>

<body>
  <div class='textContent'>
    我是加载文案
  </div>
</body>
</html>
.textContent {
    &:after {
        content: '';
        animation: dots 2s linear infinite;
    }
}

@keyframes dots {
  30% {
    content: '.';
  }
  60% {
    content: '..';
  }
  90% {
    content: '...';
  }
}
</style>

 

搞定,来看看效果吧。

0条评论
0 / 1000
龙****滔
5文章数
0粉丝数
龙****滔
5 文章 | 0 粉丝
原创

简单css实现 点点点 的加载动画效果

2024-07-10 09:44:30
56
0

有没有想过,在文字中的点点点加载效果是怎么实现的呢,下面几句代码就能完成,简单易用好实现。

 

<!-- 页面内容 index.html -->
<!DOCTYPE html>
<html>

<body>
  <div class='textContent'>
    我是加载文案
  </div>
</body>
</html>
.textContent {
    &:after {
        content: '';
        animation: dots 2s linear infinite;
    }
}

@keyframes dots {
  30% {
    content: '.';
  }
  60% {
    content: '..';
  }
  90% {
    content: '...';
  }
}
</style>

 

搞定,来看看效果吧。

文章来自个人专栏
开发手册
3 文章 | 1 订阅
0条评论
0 / 1000
请输入你的评论
0
0