![de5910afd8ad8bc0a0d1db9a8f444113.png](https://i-blog.csdnimg.cn/blog_migrate/e21efccba7d5bb45ee200d9c110f235d.png)
效果:
![bb588edcf756c3024e0b945968a19d65.png](https://i-blog.csdnimg.cn/blog_migrate/2a4dc3a6d852a170c0a3cc88b74134c4.jpeg)
关键字:linear-gradient
第一步:需要给一个div的框框
<!
![9e5ecedf3437c5ea3858c93b6ec466e7.png](https://i-blog.csdnimg.cn/blog_migrate/a67709772691cdcbbd2c4aad0485c5ff.png)
第二步:填充渐变色
<!
![027ac8cb5d1167355011ee2e1753d262.png](https://i-blog.csdnimg.cn/blog_migrate/e198514f05f9976901eba016c1c76ec2.png)
进度实现的实际效果是多个条纹叠加,然后倾斜一定的角度实现的,站在调试的角度演示一下:
![b4b7fdef951bf15749ded9fef6a680f0.png](https://i-blog.csdnimg.cn/blog_migrate/5729a7ad4f6466dd7ddc244442937ed0.jpeg)
侧翻一定的角度展示的效果就和下面的这个图片一样了
![82304ea0c7bda81c442e5a347a1ecc96.png](https://i-blog.csdnimg.cn/blog_migrate/7df3c06315dae5d357ee6ff869e9b4ca.png)
多半情况下我们都会翻车。。。。。。。。。
![733930dc9660057d919fb3a367ba4b24.png](https://i-blog.csdnimg.cn/blog_migrate/d4c96ec9979f94d424617702766292c7.png)
这个时候要分析是不是自己设置得像素的尺寸出现了问题,为了更直观调试出我们最终需要展示的效果,我这里上传了一个效果渐变的调试过程:
![a366e9501244be47ff35cecf1e9028e3.png](https://i-blog.csdnimg.cn/blog_migrate/1557de909c1c445518668d43ffe3c9cf.jpeg)
最后我们只要来个神奇的循环位置移动即可实现简单的额进度效果(实在不敢说专业,拿得出手还要手动调试一波色彩)
@
你以为这样就结束了,然而多半还是会翻车,比如下面这种情况
![50bd5872cf34c3e1fd09c7e7fd6b1ec8.gif](https://i-blog.csdnimg.cn/blog_migrate/f63da52318f6da2ec83b9fa4a28c9859.gif)
这可不是我录制的卡顿,而是没有完整走完一个周期,正确的周期应该是依据background-size的大小,否则导致循环不是一个完整周期,效果自然展示失败。
调试之后的最终效果:
![d019e01d69da2e451edfd053f88cd4fe.gif](https://i-blog.csdnimg.cn/blog_migrate/d8be1d3e5c8a39628988a16fff89807e.gif)
源代码获取(WX代号BAR_007)
如有兴趣欢迎关注:码农的技术分享 获取源代码
备注:源码有延迟 若无回复联系博主
![48f794ad160326266c5b96b534bfcaf7.png](https://i-blog.csdnimg.cn/blog_migrate/cd4cf9ca8e375ede2d64bc635cf88a0d.jpeg)