效果:
关键字:linear-gradient
第一步:需要给一个div的框框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
.bar {
margin: 10% auto;
width: 50%;
/*为了更方便展示原理 这里的高度暂时设置的稍微高一点*/
height: 60px;
border: 1px #000 solid;
/*为了美观给一个圆角*/
border-radius: 20px;
}
</style>
</head>
<body>
<div class="bar"></div>
</body>
</html>
第二步:填充渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style>
.bar {
margin: 10% auto;
width: 50%;
/*为了更方便展示原理 这里的高度暂时设置的稍微高一点*/
height: 60px;
border: 1px #000 solid;
/*为了美观给一个圆角*/
border-radius: 20px;
/*渐变填充色*/
background: linear-gradient(0deg, #39af4e, #1b39af);
}
</style>
</head>
<body>
<div class="bar"></div>
</body>
</html>
进度实现的实际效果是多个条纹叠加,然后倾斜一定的角度实现的,站在调试的角度演示一下:
侧翻一定的角度展示的效果就和下面的这个图片一样了
多半情况下我们都会翻车。。。。。。。。。
这个时候要分析是不是自己设置得像素的尺寸出现了问题,为了更直观调试出我们最终需要展示的效果,我这里上传了一个效果渐变的调试过程:
最后我们只要来个神奇的循环位置移动即可实现简单的额进度效果(实在不敢说专业,拿得出手还要手动调试一波色彩)
@-webkit-keyframes BAR {
from {
background-position: 0px 0px;
}
to {
background-position: -20px 0px;
}
}
@keyframes BAR {
from {
background-position: 0px 0px;
}
to {
background-position: -20px 0px;
}
}
你以为这样就结束了,然而多半还是会翻车,比如下面这种情况
这可不是我录制的卡顿,而是没有完整走完一个周期,正确的周期应该是依据background-size的大小,否则导致循环不是一个完整周期,效果自然展示失败。
调试之后的最终效果:
源代码获取(WX代号BAR_007)
如有兴趣欢迎关注:码农的技术分享 获取源代码
备注:源码有延迟 若无回复联系博主