最近,在 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 订阅珍藏。
如果还有什么疑难或者倡议,能够多多交换,原创文章,文笔无限,满腹经纶,文中若有不正之处,万望告知。