CSS3 做一个有闪光效果的进度条

最新推荐文章于 2024-08-18 10:51:50 发布

FungLeo

最新推荐文章于 2024-08-18 10:51:50 发布

阅读量4.1k

点赞数 4

分类专栏： HTML\CSS FungLeo的前端笔记文章标签： css3 html 进度条

本文链接：https://blog.csdn.net/FungLeo/article/details/77164527

版权

FungLeo的前端笔记同时被 2 个专栏收录

240 篇文章 88 订阅

订阅专栏

HTML\CSS

56 篇文章 1 订阅

订阅专栏

CSS3 做一个有闪光效果的进度条

今天刚入职的小前端看到一个进度条的效果，想要实现，但是不知道如何下手，于是，我写了一个demo给它看下。

最终效果：CSS3 实现闪光效果进图条

如上链接所示，不仅仅是有一个进度的效果，关键是，在进度效果上还有一个闪光效果。

开始实现

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>做一个进度条</title>
</head>
<body>
  <div class="prog">
    <div class="prog_line" style="width:50%"></div>
  </div>
</body>
</html>

代码非常简单，就是外面一层div，实现进度条的背景颜色，里面一个div实现进图条的展示。

CSS

.prog {
    width: 100%;height: 20px; border-radius: 5px; background: #f0f0f0;
    margin:20px auto;
}
.prog_line {
    transition: all 0.25s ease-in-out;
    height: 20px; background: #20A0FF;border-radius: 5px; position: relative;
}
.prog_line:after {
    display: block; content:"";height: 20px; background: #fff; border-radius: 5px;
    position: absolute; left: 0; top: 0;
    animation: progshow 1s infinite;
}
@keyframes progshow {
    0%   {width: 0; opacity: .3;}
    100% {width: 100%; opacity: 0.1;}
}