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

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;}
}

CSS部分也没什么复杂的。背景框和进度条颜色就不解释了,非常简单。

重点是利用给进度条颜色的伪元素 after 增加了一个动画效果,就最终实现了那个闪光了。

小结

有很多效果看上去很酷炫,但是我们只要静下心来仔细拆解分析一下,实现这些效果是非常简单的事情。问题是,很多新手经验积累欠缺,这个就没有办法了,只能是一步步的去积累,慢慢的来进步。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏夏时

纯 CSS 实现漂亮的大标题效果

20320
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12060
来自专栏儿童编程

正能量猫,到哪哪亮——Scratch发光猫实验

偶然想起一句话“请保持你心里的光,因为你不知道谁会借此走出黑暗。”心里小感动,决定用Scratch表达一下,于是有了本案例中走哪哪亮的正能量猫。 效果如下:

12220
来自专栏河湾欢儿的专栏

网页布局类型

1.定宽布局 2.响应式布局 流式布局(就像水一样,其实就是按照百分比布局 https://m.jd.com/ http://m.sohu.com/) ...

19730
来自专栏前端萌媛的成长之路

CSS常见布局

20320
来自专栏杨龙飞前端

前端命名规范化

16960
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

23750
来自专栏前端知识分享

第7天:input和label标签

今天学的不多,就只学了表单元素中的input和label标签。搬了房子,收拾了一下东西,太累了,所以没有学很多。明天还上班,今天就先到这。

11510
来自专栏IMWeb前端团队

jQuery选择器总结

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都...

23550
来自专栏BestSDK

9种最经典的导航模式,APP开发必备

一、标签式导航 标签式导航又称为tab式导航,现在大多数app采取的主流形式,一般分为底部导航、顶部导航、底部和顶部双tab导航 1、底部标签导航 底部导航一般...

53290

扫码关注云+社区

领取腾讯云代金券