Here I will share with you some of the knowledge I have summarized on the Internet, I hope it will be helpful to everyone
Suppose we have such a Gif image:
With CSS, we try to do something.
Pictures of Glitch Art Wind
In this article -- CSS Glitch Art , we introduce the use of blend modes to create a dizzying visual effect. A bit similar to Douyin's LOGO.
Like this:
Suppose, we have such a graph:
Just need a label
<div class="mix"></div>
For two identical pictures, superimpose cyan #0ff
and red #f00
, and stagger a certain distance, add both pictures background-blend-mode: lighten
, and add one of them mix-blend-mode: darken
:
.mix {
width: 400px;
height: 400px;
background: url($img), #0ff;
background-blend-mode: lighten;
&::after {
content: '';
position: absolute;
margin-left: 10px;
width: 400px;
height: 400px;
background: url($img), #f00;
background-blend-mode: lighten;
mix-blend-mode: darken;
}
}
Get the following effect:
Simply explain:
-
Because the picture itself is not red and cyan, it is necessary to
background-image
superimpose andbackground-blend-mode: lighten
make it appear through -
In order to keep the original color of the superimposed part in the middle, it is necessary to superimpose another
mix-blend-mode: darken
and inversely process it. (Students who don't understand can turn on debugging, manually turn off several mixed modes, and feel it for themselves)
Complete DEMO:
Image-like Douyin LOGO Glitch effect
Of course, it is also possible to use a Gif image here. Let’s replace our Gif image and see what kind of effect we will get:
Interesting, you can click here for the complete code: iKUN - Use background-blend-mode | mix-blend-mode to achieve a dizzy effect similar to Douyin LOGO
Multi-image fusion
Blend modes are of course more than that.
Let's do another interesting effect.
First, find a map of the earth, which may look like this (is it a bit familiar):
Put our characters on it to get such an effect:
The magic thing is, what happens if we add a blending mode to the animation overlaid on top? try it:
通过混合模式 mix-blend-mode: multiply
,巧妙的消除了大部分非人物的背景,再通过 filter: contrast(3)
加深这个效果,彻底去掉动图背景,融入了我们的地球背景中。
这样,我们巧妙的将两张图,融合成了一张图。
当然,多调试调试,还能有不一样的效果,这里我实现了两种不一样的效果,完整的代码如下:
<div></div>
<div class="white"></div>
div {
position: relative;
margin: auto;
width: 400px;
height: 500px;
flex-shrink: 0;
background: url(earth.jpg);
background-size: cover;
background-position: 0 -150px;
background-repeat: no-repeat;
&::before {
content: "";
position: absolute;
top: 240px;
left: 160px;
width: 70px;
height: 90px;
background: var(cxk.gif);
background-size: cover;
background-position: -30px 0;
mix-blend-mode: multiply;
filter: contrast(3);
}
}
.white {
&::before {
mix-blend-mode: color-dodge;
filter: invert(1) contrast(3);
}
}
.black {
&::before {
background: var(--bgUrl), #000;
background-size: cover;
background-position: -70px 0;
mix-blend-mode: multiply;
filter: contrast(3);
}
}
这样,我们就得到了两种不一样的效果:
完整的 Demo,你可以戳这里:CodePen Demo -- CSS iKUN Animation
干掉背景
上面的效果不错,但是,还远远不够。
有的时候,我们只想更突出主题,不想过多的看到背景元素。
怎么办呢?
这里,我介绍两种还不错的小技巧,当然,这个技巧对图片本身可能会有一点点要求。
第一个技巧,是我在这篇文章中,曾经介绍过的一个技巧 -- 巧用 background-clip 实现超强的文字动效。
这里的核心在于,借助 background-clip: text
能够只在文字部分展示图片内容的特性,结合滤镜和混合模式的处理,实现一种文字动图效果。达到有效的去除一些背景的干扰。
我们一起来看看。
还是这张 Gif 图:
我们首先通过滤镜 filter: grayscale(1)
,将他从彩色的,处理成黑白灰的:
p {
background: url(xxx);
filter: grayscale(1);
}
处理后的图片,大概会是这样:
基于一张黑白底色的图片,我们再运用 background-clip: text
,再通过混合模式 mix-blend-mode: hard-light
,并且,很重要的一点,我们把这个效果放在黑色的背景之上:
body {
background: #000;
}
p {
color: transparent;
background: url(xxx) center/cover;
background-clip: text;
filter: grayscale(1);
mix-blend-mode: hard-light;
}
将会得到这样一种神奇的效果,通过混合模式的叠加处理,文字的亮部将会保留,而暗部则会与黑色背景融合:
当然,我们更希望的是,人的部分展示保留,而 Gif 图片中的背景部分被隐藏,就完美了!
这里,我们继续优化下代码,我们希望能把被 grayscale()
处理过的原图的明暗部分置换,刚好,在 filter
中,存在一个 invert()
函数,能够反转输入图像的色值。
因此,在 grayscale()
之后,再配合一次 invert(1)
函数:
body {
background: #000;
}
p {
color: transparent;
background: url(xxx) center/cover;
background-clip: text;
filter: grayscale(1) invert(1);
mix-blend-mode: hard-light;
}
OK,至此,我们利用纯 CSS 实现了这样一种 unbelievable 的文字效果:
合理添加混合模式
mix-blend-mode
,能够更好的去除背景的干扰,实际使用的时候根据不同图片的颜色需要进行一定的调试。
另一种干掉背景的方式
那是不是只有上述的方式可以干掉图片的背景,保留主体人物部分呢?
当然不止,还有其他方式。下面,我们不借助 background-clip: text
,通过另外一种借助混合模式和滤镜的方式去掉背景干扰。
我们借助 Demo 1 的例子继续,就是如下这个效果:
在这个例子的基础上,我们直接加上 filter: grayscale(1) invert(1)
和 mix-blend-mode: hard-light
,像是这样:
.mix {
background: url($img), #0ff;
background-blend-mode: lighten;
filter: grayscale(1) invert(1);
mix-blend-mode: hard-light;
&::after {
content: '';
position: absolute;
margin-left: 10px;
background: url($img), #f00;
background-blend-mode: lighten;
mix-blend-mode: darken;
}
}
看看效果:
Wow,怎么做到的呢?我们来调试一些,你就能更好的 Get 到其中的奥妙:
这里,核心发挥作用的还是 filter: grayscale(1) invert(1)
,而 mix-blend-mode: hard-light
的意义是让一些不那么明显的背景直接比较被干掉。
完整的代码,你可以戳:CodePen Demo -- iKUN Animation
再动起来
有点意思,但还不够。我们再回到 background-clip: text
的效果中。
背景图在动,我们能不能让文字也动起来呢?这样,整个动画就处于一种 Gif 在图,我们的内容也在动的双重动效之下。
尝试一下,这里为了尝试更多的效果,我借助了 CSS-doodle 这个库,这里我们核心要做的事情是:
- 借助
background-clip: text
只展示文字部分的背景图的特性,首先设置多个重叠在一起的 DIV - 每个 DIV 都借助文章上面介绍的技巧,设置背景图,利用
filter: grayscale(1) invert(1)
,只展示人的部分 - 给每个 DIV 添加文本内容,添加
background-clip: text
- 随机给文本设置初始高度定位
- 通过动画让文本动起来,并且设置不同的
animation-delay
上面其实只是最核心的一些流程介绍,可以结合代码一起看看,完整的 CSS-doodle 代码如下:
<css-doodle grid="10x10">
:doodle {
@size: 70vmin 70vmin;
}
:container {
position: relative;
filter: grayscale(1) invert(1);
}
position: absolute;
inset: 0;
:after {
position: absolute;
content:"---------";
inset: 0;
font-size: 24px;
line-height: 0;
color: transparent;
background: url(xxx)
center/cover;
background-clip: text;
padding-top: @r(69vmin);
animation: move .5s @r(-0.99s) infinite linear;
}
@keyframes move {
0% {
padding-left: 0
}
100% {
padding-left: 70vmin;
}
}
</css-doodle>
html,
body {
position: relative;
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #000;
cursor: pointer;
}
这样,我们就得到了一种图在动,内容也在动的效果:
当然,这个效果可能会有一点绕!实际上你可以想象一下,把图片固定,通过 background-clip: text
透出图片内容,同时,让文本内容动起来,就是如此。如果去掉 background-clip: text
看看下图,可能你会更好理解一点:
当然,实际上如果去掉
background-clip: text
并不会如上图所示,因为这里每一层会使用一张背景图,background-clip
无法引用于它的子元素,只能应用于本身,所以这个动画也有一个缺陷,如果图层数量太多,效果会比较卡顿。
CodePen Demo -- CSS Doodle - iKUN Animation
修改每个 DIV 的文本内容,得到的效果也不相同,像是把内容替换成 .。.
,可以得到这样的效果:
CodePen Demo -- CSS Doodle - iKUN Animation
3D 视角
OK,最后我们再来尝试下 3D 视角。
使用 CSS,我们可以非常轻松的实现 3D 多面体,像是这样:
如果我们把每边的图片,替换成上述的效果,再把我们的视角放置于中间,会发生什么呢?看看,八面体的图片墙:
再尝试把视角,放进 3D 照片墙的中间:
Wow,是不是挺有意思的,完整的 Demo,你可以戳这里:iKUN Animation
Constantly changing perspective
, you can also get a different look and feel experience. If you are interested, you can debug it yourself.
Summarize
To sum up, this article introduces some interesting examples realized by using CSS through a Gif diagram.
Of course, the power of CSS is far more than that. This article just digs a direction, from the direction of highlighting the characters, and lists some dynamic effects that I think are more interesting.