江苏龙网

  1. 主页 > 生活百科 > >

CSS 遮罩合成实现带圆角的环形 loading 动画

css


CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
 
今天来用 css 实现一个带圆角的环形 loading 动画，效果是这样的
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
先不考虑动画，其实就是这样一个图形
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
那么，如何来绘制呢？下面花两分钟一起看看吧 。
一、CSS实现思路首先，看到这环形逐渐消失的效果，也就是透明度渐变的效果，肯定要联想到锥形渐变 。
conic-gradient() - CSS：层叠样式表 | MDN (mozilla.org)[1]
通过锥形渐变，可以很轻松的实现这样一个效果，透明到纯色的渐变 。
loading{background: conic-gradient(transparent 10%, royalblue 90%)}效果如下：
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
然后，整体是一个环形，可以通过径向渐变配合mask遮罩实现 。
radial-gradient() - CSS：层叠样式表 | MDN (mozilla.org)[2]
mask - CSS: Cascading Style Sheets | MDN (mozilla.org)[3]
 
loading{/*...*/-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%);}原理是这样的 。
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
【CSS 遮罩合成实现带圆角的环形 loading 动画】还有一个圆角，可以直接用径向渐变实现 。
loading{background: radial-gradient( closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat,conic-gradient(transparent 10%, royalblue 90%);;}其实就是两个相同颜色的渐变叠加到一起形成的，如下：
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
所以完整代码就是 。
loading{width: 200px;height: 200px;background:radial-gradient( closest-side circle, royalblue 99%, transparent 100%) center top/25% 25% no-repeat,conic-gradient(transparent 10%, royalblue 90%);-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%);}二、更好地自定义颜色上面的实现虽然很好的满足了需求，但是，还是有些CSS设计问题 。
比如，我如果需要改变 loading 的颜色，需要改变两个地方 。
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
很明显，这样的实现不太符合 DRY（Don't Repeat Yourself）原则 。
有一个比较简单思路可以用 CSS 变量来传递 。
loading{--color: royalblue;background:radial-gradient( closest-side circle, var(--color) 99%, transparent 100%) center top/25% 25% no-repeat,conic-gradient(transparent 10%, var(--color) 90%);-webkit-mask: radial-gradient( closest-side circle, transparent 50%, red 51% 99%, transparent 100%);}这样每次都只需要改变一个变量就行了 。
loading.red{--color: red;} 
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
除了这种方式以外，其实还有一点需要考虑，为啥背景不能干净一点、纯粹一点呢？换个说法，现在的背景实现对于不了解的同学来讲，可能会很费劲，能否将这些细节隐藏起来，更直观地去自定义颜色呢？比如像这种方式 。
loading.red{background: red;}如果要实现这样的效果，就需要将绘制部分全部在mask遮罩中完成，背景只是展示而已 。
那么，如何通过mask遮罩实现这样的图形呢？
三、更直观地去自定义颜色mask?遮罩其实也和 CSS 背景差不多，只是多了一些图形合成操作，其实就是布尔运算，也就是mask-composite 。
mask-composite - CSS: Cascading Style Sheets | MDN (mozilla.org)[4]
/* Keyword values */mask-composite: add; /* 叠加（默认） */mask-composite: subtract; /* 减去，排除掉上层的区域 */mask-composite: intersect; /* 相交，只显示重合的地方 */mask-composite: exclude; /* 排除，只显示不重合的地方 */相信在很多图形设计软件中都见到类似的操作（下面是 Photoshop） 。
CSS 遮罩合成实现带圆角的环形 loading 动画

文章插图
这个属性的值（标准和非标准）非常多，-webkit-mask-composite[5] 与标准下的值有所不同，属性值非常多，如下（chorme 、safari 支持） 。
-webkit-mask-composite: clear; /*清除，不显示任何遮罩*/-webkit-mask-composite: copy; /*只显示上方遮罩，不显示下方遮罩*/-webkit-mask-composite: source-over; /*叠加，两者都显示*/-webkit-mask-composite: source-in; /*只显示重合的地方*/-webkit-mask-composite: source-out; /*只显示上方遮罩，重合的地方不显示*/-webkit-mask-composite: source-atop;-webkit-mask-composite: destination-over; /*叠加，两者都显示*/-webkit-mask-composite: destination-in; /*只显示重合的地方*/-webkit-mask-composite: destination-out;/*只显示下方遮罩，重合的地方不显示*/-webkit-mask-composite: destination-atop;-webkit-mask-composite: xor; /*只显示不重合的地方*/


推荐阅读


上一篇：复杂性也是IT成本，你明白了吗？

下一篇：基于SQL的数据可视化和数据挖掘