记录–开局一张图，构建神奇的 CSS 效果

假设，我们有这样一张 Gif 图：

利用 CSS，我们尝试来搞一些事情。

图片的 Glitch Art 风

在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。

像是这样：

假设，我们有这样一张图：

 只需要一个标签即可

<div class="mix"></div>

神奇的事情在于，如果，我们给叠加在上面的动图，添加一个混合模式，会发生什么呢？尝试一下：

通过混合模式 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);     } }

p {     background: url(xxx);     filter: grayscale(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; }

.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;   } }

<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>

这样，我们就得到了一种图在动，内容也在动的效果：

当然，这个效果可能会有一点绕！实际上你可以想象一下，把图片固定，通过 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

不断改变 perspective，还可以得到不一样的观感体验，感兴趣的，可以自己调试调试。

总结

总结一下，本文通过一张 Gif 图，介绍了一些利用 CSS 来实现的有趣例子。

当然，CSS 的强大远不止这样，本文仅仅是挖掘了一个方向，从将人物凸显的方向，列出了一些我认为比较有意思的动效。