乐趣区

关于前端:CSS-MASK-实现-loading动画

jiezi

欢送关注我的公众号：前端侦探

分享一个简略的 loading 成果，如下

本案例来源于 Temani Afif on CodePen，略有批改

仔细观察，次要有两个动画

  1. 小球的静止
  2. 背景的变动

看似有点简单，其实换个角度，实现要比设想的容易很多，也十分奇妙，一起看看吧

一、整体思路

如果依照失常的思路，可能会做两个动画，小球的动画还好，只是方位的变动，然而背景就麻烦了，除了色彩的变动，还有角度的变动，该如何实现呢？

🤔

🤔

🤔

其实换一下角度，多察看几遍，将整个视线反过来，你会发现，小球的背景绝对于整个画布是静止的 ，也就是说，背景其实没有变动， 小球只是挖了一个孔，这个孔在静止，示意成果如下

提到挖孔，能够想到 遮罩（CSS Mask）。对于遮罩，这个技巧十分实用，之前在多篇文章中都有用到

  • 一个有意思的 CSS 图片 hover 成果
  • CSS 如何实现羽化成果？
  • 别用图片了，CSS 遮罩合成实现带圆角的环形 loading 动画
  • CSS mask 实现鼠标追随镂空成果
  • CSS 实现 Chrome 标签栏的技巧
  • CSS 实现优惠券的技巧

所以，如果想到了这一点，上面的实现就很简略了，一个 4 种颜色的背景和一个静止的彩色遮罩

二、背景的绘制

置信大家对这个背景都很相熟，常常在 CSS 绘制三角形的时候看到这个原理图，这里同样也能够用 border 来实现

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

这样就失去所须要的图案

当然，除了这种形式，还能够采纳 锥形突变 来绘制

无关锥形突变的技巧，能够参考之前这几篇文章

  • 锥形突变只能画圆锥吗？conic-gradient 10 大利用举例
  • 纯 CSS 突变绘制 Chrome 图标
  • CSS & SVG 绘制写作网格线的 3 种形式
  • CSS 实现切角成果
  • CSS 绘制一个时钟
  • CSS 实现通明方格的 3 种形式

实现也很简略，起始角度是 45deg，每 1/4 换一种色彩

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

也能失去和下面完全相同的背景

三、镂空小球的绘制和静止

接下来须要通过 CSS MASK 来绘制小球。很简略，就是一个从实色到通明的径向突变。

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

留神，这里应用了关键词 closest-side，示意 最近的边 ，益处是 能够依据背景尺寸间接管制圆的大小，默认值是farthest-side，其余选项具体如下

关键字 形容
closest-side 突变核心间隔容器 最近的边 作为终止地位。
closest-corner 突变核心间隔容器 最近的角 作为终止地位。
farthest-side 突变核心间隔容器 最远的边 作为终止地位。
farthest-corner（默认值） 突变核心间隔容器 最远的角 作为终止地位。

当然，对于 齐全对称 的容器，closest-* 和 farthest-*是完全相同的，各自的区别如下所示

能够失去这样的成果，其余部分曾经被裁剪掉了

最初只须要扭转遮罩的地位就行了，动画关键帧如下

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

这样就实现了文章结尾的成果

残缺代码如下

.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}
}

残缺代码能够查看以下任意链接：

  • CSS dot loader (codepen.io)
  • CSS dot loader (runjs.work)

四、总结一下

总的来说实现非常简单，都是一些比拟惯例的绘制形式，然而思路却十分奇妙，通过扭转 MASK 遮罩的地位来实现小球的背景地位变动，上面简略总结一下

  1. 整体思路其实是背景不动，挖孔在动
  2. 背景能够通过不同色彩的边框实现
  3. 背景还能够通过锥形突变实现
  4. 圆形挖孔其实就是径向突变的遮罩
  5. 通过动画扭转遮罩的地位

另外，对于锥形突变和遮罩在本文介绍的并不多，然而引入了之前很多相干文章，有趣味的能够回顾一下，很多十分实用的案例。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探

退出移动版