欢送关注我的公众号：前端侦探
分享一个简略的loading成果，如下
本案例来源于 Temani Afif on CodePen，略有批改
仔细观察，次要有两个动画
- 小球的静止
- 背景的变动
看似有点简单，其实换个角度，实现要比设想的容易很多，也十分奇妙，一起看看吧
一、整体思路
如果依照失常的思路，可能会做两个动画，小球的动画还好，只是方位的变动，然而背景就麻烦了，除了色彩的变动，还有角度的变动，该如何实现呢？
其实换一下角度，多察看几遍，将整个视线反过来，你会发现，小球的背景绝对于整个画布是静止的，也就是说，背景其实没有变动，小球只是挖了一个孔，这个孔在静止，示意成果如下
提到挖孔，能够想到遮罩（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 遮罩的地位来实现小球的背景地位变动，上面简略总结一下
- 整体思路其实是背景不动，挖孔在动
- 背景能够通过不同色彩的边框实现
- 背景还能够通过锥形突变实现
- 圆形挖孔其实就是径向突变的遮罩
- 通过动画扭转遮罩的地位
另外，对于锥形突变和遮罩在本文介绍的并不多，然而引入了之前很多相干文章，有趣味的能够回顾一下，很多十分实用的案例。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号：前端侦探