使用蒙版图层实现渐变进度条

62 阅读1分钟

image.png

如图实现这种渐变进度条并且有切割的小方块关键api:mask-image background-image background

实现思路:

先写出渐变的背景色:

background-image: linear-gradient(90degrgba(1601988400%#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 属性对此进行控制。