前端入坑纪 53
日更计划第三天，如题，以前看到过类似的效果。今天便来实践一番...
好，详解如下！
OK，first things first！ github项目地址
渐变是会变歪的
HTML 结构
<div class="barWrp">
<div class="bar"></div>
</div>
两个div 分别 代表 进度条的外框 和 进度条
CSS 结构
body{
background-color:skyblue;
}
.barWrp{
margin:10px 0;
border:1px solid #fff;
border-radius:4px;
}
.bar{
height: 30px;
background-color:#fff;
background-image:linear-gradient(45deg,yellow 25%,green 0,green 50%, yellow 0,yellow 75%,green 0);
background-size:30px 30px;
animation: backgroundPosition 1s linear infinite, widtheft 2s linear infinite;
}
@keyframes backgroundPosition{
0%{
background-position:0 center
}
100%{
background-position:60px center
}
}
@keyframes widtheft{
0%{
width:1%;
}
100%{
width:100%;
}
}
1.background-image 参数中的green 0, yellow 0 ,都是对过渡颜色的一个截断，这样就相当于没有过渡了，条纹效果就是这么出来了。（不晓得这样解释是否贴切，不胜理解的可以百度详细的资料）
2.animation: backgroundPosition 1s linear infinite; infinite 可以让动画一直循环不停。 这里的 widtheft 2s linear infinite，仅仅是展示效果，请略过
3.@keyframes backgroundPosition 这个是条纹动起来的原理，简单说，便是背景的x轴上的位置，从0px走到60px。
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！
支持你我，扫一扫红包
