如图实现这种渐变进度条并且有切割的小方块关键api:mask-image background-image background
实现思路:
先写出渐变的背景色:
background-image: linear-gradient(90deg, rgba(160, 198, 84, 0) 0%, #FFFB34 100%);
再把背景色分割成很多个小方块
background-size: 0.25em 1.25em;
实现效果是每个小方块实现的渐变,并没有设计稿上整个大div有渐变于是
mask-image: linear-gradient(to left, transparent, black);
-webkit-mask-image: linear-gradient(to left, transparent, black);
就完成啦!
tip:
mask-image CSS 属性设置了用作元素蒙版层的图像。默认情况下,这意味着蒙版图像的 alpha 通道将与元素的 alpha 通道相乘。可以使用 mask-mode 属性对此进行控制。