前端入坑纪 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 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包