共计 2134 个字符,预计需要花费 6 分钟才能阅读完成。
欢送关注我的公众号:前端侦探
分享一个简略的 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 遮罩的地位来实现小球的背景地位变动,上面简略总结一下
- 整体思路其实是背景不动,挖孔在动
- 背景能够通过不同色彩的边框实现
- 背景还能够通过锥形突变实现
- 圆形挖孔其实就是径向突变的遮罩
- 通过动画扭转遮罩的地位
另外,对于锥形突变和遮罩在本文介绍的并不多,然而引入了之前很多相干文章,有趣味的能够回顾一下,很多十分实用的案例。最初,如果感觉还不错,对你有帮忙的话,欢送点赞、珍藏、转发❤❤❤
欢送关注我的公众号:前端侦探