大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

让渐变成为滚动的进度条吧

前端入坑纪 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 领红包,领到大红包的小伙伴赶紧使用哦!
支持你我,扫一扫红包