头图

CSS MASK 实现 loading动画

欢迎关注我的公众号:前端侦探

分享一个简单的loading效果,如下

Kapture 2023-05-20 at 15.14.39.gif

本案例来源于 Temani Afif on CodePen,略有修改

仔细观察,主要有两个动画

  1. 小球的运动
  2. 背景的变化

看似有点复杂,其实换个角度,实现要比想象的容易很多,也非常巧妙,一起看看吧

一、整体思路

如果按照正常的思路,可能会做两个动画,小球的动画还好,只是方位的变化,但是背景就麻烦了,除了颜色的变化,还有角度的变化,该如何实现呢?

🤔

🤔

🤔

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

Kapture 2023-05-20 at 15.36.25.gif

提到挖孔,可以想到遮罩(CSS Mask)。关于遮罩,这个技巧非常实用,之前在多篇文章中都有用到

所以,如果想到了这一点,下面的实现就很简单了,一个4种颜色的背景和一个运动的黑色遮罩

二、背景的绘制

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

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

这样就得到所需要的图案

image.png

当然,除了这种方式,还可以采用锥形渐变来绘制

Kapture 2023-03-18 at 14.01.10.gif

有关锥形渐变的技巧,可以参考之前这几篇文章

实现也很简单,起始角度是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-*是完全相同的,各自的区别如下所示

image-20230415143458908

可以得到这样的效果,其余部分已经被裁剪掉了

image-20230520161625078

最后只需要改变遮罩的位置就行了,动画关键帧如下

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

这样就实现了文章开头的效果

Kapture 2023-05-20 at 15.14.39.gif

完整代码如下

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

完整代码可以查看以下任意链接:

四、总结一下

总的来说实现非常简单,都是一些比较常规的绘制方式,但是思路却非常巧妙,通过改变 MASK 遮罩的位置来实现小球的背景位置变化,下面简单总结一下

  1. 整体思路其实是背景不动,挖孔在动
  2. 背景可以通过不同颜色的边框实现
  3. 背景还可以通过锥形渐变实现
  4. 圆形挖孔其实就是径向渐变的遮罩
  5. 通过动画改变遮罩的位置

另外,关于锥形渐变和遮罩在本文介绍的并不多,但是引入了之前很多相关文章,有兴趣的可以回顾一下,很多非常实用的案例。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号:前端侦探

前端侦探
致力于有趣的前端探索~
14.7k 声望
13.7k 粉丝
0 条评论
推荐阅读
使用 CSS 渐变来实现波浪动画
之前看到coco的这样一篇文章: 纯 CSS 实现波浪效果!,非常巧妙,通过改变border-radius和不断旋转实现的波浪效果,有兴趣的可以去研究一下。这次尝试一下使用 CSS 渐变来实现这样一个效果,还可以用在文字背景...

XboxYan5阅读 1评论 2

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
14.7k 声望
13.7k 粉丝
宣传栏