其實有一個mask-image屬性 挺有意思，在元素上面實現遮罩層的效果，不過這玩意有些兼容性問題 需要處理，所以單純可以通過漸變色的方式來實現 同時加上動畫效果

 .jianbian {width: 100%;height: 16px;background-color: #eee;display: flex;border-radius: 16px;}.progress {height: 100%;width: 60%;background-image: linear-gradient(270deg, #ff3905 10%, #ff814f 100%);border-radius: 16px;display: flex;}.mask {height: 100%;width: 100%;background-image: linear-gradient(45deg,rgba(255, 255, 255, 0.3) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.3) 50%,rgba(255, 255, 255, 0.3) 75%,transparent 75%,transparent);background-size: 20px 20px;animation: stripe 1s linear infinite;}@keyframes stripe {from {background-position: 0 0;}to {background-position: 20px 0;}}

html結構

 <div class="jianbian"><div class="progress"><div class="mask"></div></div></div>

pdf制作有點麻煩 搞了個截圖

距離1024 還差一百多篇吧 加油