前端入坑紀 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 參數(shù)中的green 0, yellow 0 ,都是對過渡顏色的一個截斷，這樣就相當于沒有過渡了，條紋效果就是這么出來了。（不曉得這樣解釋是否貼切，不勝理解的可以百度詳細的資料）
2.animation: backgroundPosition 1s linear infinite; infinite 可以讓動畫一直循環(huán)不停。 這里的 widtheft 2s linear infinite，僅僅是展示效果，請略過
3.@keyframes backgroundPosition 這個是條紋動起來的原理，簡單說，便是背景的x軸上的位置，從0px走到60px。
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
打開支付寶首頁搜 625097528 領紅包，領到大紅包的小伙伴趕緊使用哦！
支持你我，掃一掃紅包
