最近，在 CodePen 上，看到一个十分有意思的图片动效，成果如下：
原成果链接：CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations
自身这个动画成果，并没有多惊艳。惊艳的中央在于原作者的实现形式十分乏味，咱们简略来看看：
<div></div>$base: 'https://images.unsplash.com/';$imid: '1608848461950-0fe51dfc41cb';$size: 800;/* declarations 1 through 3 are for layout */html, body, div { display: grid } /* 1 */ html { height: 100% } /* 2 */div { place-self: center; /* 3 */ background: /* cat image */ url('#{$base}photo-#{$imid}?w=#{$size}') 50%/ cover; /* 4 */ &::after { padding: 200px; /* 5 size element */ background: /* blinds */ /* top to bottom 50% lightness grey to white * repeating gradient (16 repetitions) */ /* slightly lighter than 50% grey to fix Chrome on Android glitch */ repeating-linear-gradient(hsl(0, 0%, 52.5%), #fff 6.25%), /* 50% lightness grey to white gradient * the top third of the gradient is fully grey * the middle third is the gradient transition * from the 50% lightness grey of the first third * to white, which also covers the bottom third */ /* extra black stop added to fix Chrome on Android glitch */ linear-gradient(#000 33.3%, grey 0, #fff 66.7%) /* background height is 3x the element's height */ 0/ 100% 300%; /* 6 */ /* for reference: this talk where I go into * the multiply blend mode (Chromium only slides) * https://codepen.io/thebabydino/project/full/ZjwjBe */ background-blend-mode: multiply; /* 7 */ /* use a very high contrast value to make * all greys darker than the 50% lightness one black * and all others white * from top to bottom, this gives us * horizontal white bands of increasing height * with black in between */ filter: contrast(999); /* 8 */ /* also detailed in the talk mentioned above * wherever this pseudo is white, result of blending * with parent (with cat background) is white; * wherever this pseudo is black, result of blending * with parent is the parent (cat background here) */ mix-blend-mode: screen; /* 9 */ /* background-position animation goes back and forth */ animation: p 1s linear infinite alternate; /* 10 */ content: '' /* 11 necesarry for pseudo to show up */ }}@keyframes p { /* cat is covered by grey top third of tall gradient, * which results in a fully black pseudo after * blending backgrounds & applying contrast * => result after blending it with the cat is the cat*/ 0%, 25% { background-position: 0 0 } /* 12 */ /* cat is covered by white bottom third of tall gradient, * which results in a fully white pseudo after * blending backgrounds & applying contrast * => fully white result after blending with cat */ 75%, 100% { background-position: 0 100% } /* 13 */}怎么样，理论代码行数不错，大部分是正文。
整个成果的外围是利用了突变 + mix-blend-mode、background-blend-mode 以及滤镜 filter。置信大部分人看到上述的代码不调试一番是不晓得到底产生了啥的。（我也是）
当然，本文不是来分析原作者的构思奇妙，而是想就着这个成果，思考一下，在 CSS 中，咱们是否有方法应用其余形式，疾速还原同样的动画成果？
答案是必定的。接下来，咱们就应用 CSS @property 和 mask 的组合，疾速还原上述动画成果。
动画合成
其实下面的动画，整体而言能够拆解成两个局部。
- 向上遮罩隐没动画
首先，咱们须要实现这么一个向上的遮罩隐没动画：
办法很多，然而最适宜用于实现这类成果的是 mask 或者 clip-path，当然，须要配合上 CSS @property。
咱们应用 mask 配合上 CSS @property，这个成果其实很简略，代码如下：
<div></div>@property --per { syntax: '<percentage>'; inherits: false; initial-value: 100%;}div { background: url(https://picsum.photos/400/400?random=100); width: 400px; height: 400px; mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent); animation: change 3s infinite linear;}@keyframes change { 0%, 60% { --per: 100%; } 70%, 100% { --per: 0%; }}外围就在于设定了这样一个 mask -- linear-gradient(#000, #000 var(--per), transparent var(--per), transparent)，其中 --per 这个 CSS 变量的值示意的就是通明与显示状态的一个百分比值。动画过程中，只须要动静的将这个百分比值从 100% 批改为 0% 即可实现向上遮罩隐没动画。
这样，咱们就失去了这么个成果：
如果你对 mask 和 CSS @property 的用法还不是很相熟，倡议你先看看这两篇，补齐一下基础知识：
微妙的 CSS MASK
CSS @property，让不可能变可能
- 百叶窗动画
其次，咱们须要实现一个百叶窗动画成果，像是这样：
在了解了下面的向上遮罩隐没动画后，其实这里的百叶窗动画只是迷你版本的向上遮罩隐没动画。
与上述的代码完全一致，只是调整一下 mask-size 即可。
@property --per { syntax: '<percentage>'; inherits: false; initial-value: 100%;}div { background: url(https://picsum.photos/400/400?random=100); width: 400px; height: 400px; mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent); mask-size: 100px 20px; animation: change 3s infinite linear;}@keyframes change { 0%, 60% { --per: 100%; } 70%, 100% { --per: 0%; }}留神，下面的代码与第一段代码简直完全一致，仅仅在于多加了 mask-size: 100px 20px。这样，咱们就疾速的失去了百叶窗的切换动画成果：
- 联合向上遮罩隐没动画与百叶窗动画
有了上述两个动画，其实咱们只须要把它们联合一下，就能够失去文章一结尾的成果。
残缺的代码如下：
@property --per { syntax: '<percentage>'; inherits: false; initial-value: 100%;}div { background: url(https://picsum.photos/400/400?random=100); width: 400px; height: 400px; mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent), linear-gradient(#000, #000 var(--per), transparent var(--per), transparent); mask-size: 100px 20px, 100% 100%; animation: change 3s infinite linear;}@keyframes change { 0%, 60% { --per: 100%; } 70%, 100% { --per: 0%; }}这样，咱们就胜利的利用了一种其它形式，还原了文章一结尾的动画成果：
CodePen Demo -- Image Hover Effect
扩大延长
当然，把握了上述动画的技巧后，咱们齐全能够进行一些延长尝试。
譬如，咱们能够把下面 mask 的 linear-gradient() 替换成 radial-gradient()。
原理也是一样的：
@property --per1 { syntax: '<length>'; inherits: false; initial-value: 20px;}@property --per2 { syntax: '<percentage>'; inherits: false; initial-value: 0%;}div { background: url(https://picsum.photos/400/400?random=100); width: 400px; height: 400px; mask: repeating-radial-gradient(#000, #000 var(--per1), transparent var(--per1), transparent 20px), radial-gradient(transparent, transparent var(--per2), #000 var(--per2), #000); animation: change 3s infinite linear;}@keyframes change { 0%, 60% { --per1: 20px; --per2: 0%; } 70%, 100% { --per1: 0px; --per2: 100%; }}只是，这里咱们用到了两个 CSS @property 变量。这样，就实现了一个环形的递进向外的百叶窗隐没动画：
稍加革新，就能实现 Hover 交互成果：
div { cursor: pointer; transition: --per1 .3s, --per2 .3s;}div:hover { --per1: 0px; --per2: 100%;}一个十分有意思的 Hover 成果就实现了：
残缺的代码，你能够戳这里：CodePen Demo -- Image Hover Effect
最初
好了，本文到此结束，心愿对你有帮忙 :)
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。