CSS 遮罩MASK 实现 loading动画

2023-05-2214:59:14网页制作Comments1,264 views字数 1755阅读模式

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

本案例来源于 Temani Afif on CodePen，略有修改文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

仔细观察，主要有两个动画文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

小球的运动
背景的变化

看似有点复杂，其实换个角度，实现要比想象的容易很多，也非常巧妙，一起看看吧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

一、整体思路

如果按照正常的思路，可能会做两个动画，小球的动画还好，只是方位的变化，但是背景就麻烦了，除了颜色的变化，还有角度的变化，该如何实现呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

其实换一下角度，多观察几遍，将整个视野反过来，你会发现，小球的背景相对于整个画布是静止的，也就是说，背景其实没有变化，小球只是挖了一个孔，这个孔在运动，示意效果如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

提到挖孔，可以想到遮罩（CSS Mask）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

所以，如果想到了这一点，下面的实现就很简单了，一个4种颜色的背景和一个运动的黑色遮罩文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

二、背景的绘制

相信大家对这个背景都很熟悉，经常在CSS绘制三角形的时候看到这个原理图，这里同样也可以用border来实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

div{
  width: 0;
  border: 60px solid;
  border-color: #2196F3,#F44336,#4CAF50,#FFC107
}

这样就得到所需要的图案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

当然，除了这种方式，还可以采用锥形渐变来绘制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

实现也很简单，起始角度是45deg，每 1/4换一种颜色文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

div{
  width: 120px;
  height: 120px;
  background: conic-gradient(from 45deg,#2196F3 25%,#F44336 0 50%,#4CAF50 0 75%,#FFC107 0);
}

也能得到和上面完全相同的背景文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

三、镂空小球的绘制和运动

接下来需要通过 CSS MASK来绘制小球。很简单，就是一个从实色到透明的径向渐变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

div{
  ...
  -webkit-mask: radial-gradient(closest-side circle,#000 99%,#0000 100%) left/40px 40px no-repeat
}

注意，这里使用了关键词closest-side，表示最近的边，好处是可以根据背景尺寸直接控制圆的大小，默认值是farthest-side，其他选项详细如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

关键字	描述
`closest-side`	渐变中心距离容器最近的边作为终止位置。
`closest-corner`	渐变中心距离容器最近的角作为终止位置。
`farthest-side`	渐变中心距离容器最远的边作为终止位置。
`farthest-corner（默认值）`	渐变中心距离容器最远的角作为终止位置。

当然，对于完全对称的容器，closest-* 和 farthest-*是完全相同的，各自的区别如下所示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

可以得到这样的效果，其余部分已经被裁剪掉了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

最后只需要改变遮罩的位置就行了，动画关键帧如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

@keyframes load {
  25% {-webkit-mask-position: top   }
  50% {-webkit-mask-position: right }
  75% {-webkit-mask-position: bottom}
}

这样就实现了文章开头的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

完整代码如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/41109.html

.loader {
  width: 120px; 
  height: 120px;
  background: conic-gradient(from 45deg,#2196F3 25%,#F44336 0 50%,#4CAF50 0 75%,#FFC107 0);
  -webkit-mask: radial-gradient(50% 50%,#000 96%,#0000) left/35% 35% no-repeat;
  animation: load 2s infinite;
}
@keyframes load {
  25% {-webkit-mask-position: top   }
  50% {-webkit-mask-position: right }
  75% {-webkit-mask-position: bottom}
}