从一张图片开始，构建神奇的CSS效果
时间：2023-04-05 22:43:07
HTML5
假设我们有这样一张Gif图片：使用CSS，我们尝试做一些事情。GlitchArtforPictures在这篇文章--CSSGlitchArt中，我们介绍了使用混合模式来创建令人头晕目眩的视觉效果。有点像抖音的LOGO。像这样：假设我们有这样一张图片：只需要一个标签
就可以给出两张相同的图片，叠加青色#0ff和红色#f00，错开一定距离，背景-blend-mode:lighten应该添加到两张图片，并且mix-blend-mode:darken应该添加到其中一张：.mix{width:400px;高度：400px；背景：url($img),#0ff;背景混合模式：变亮；＆::之后{内容：'';位置：绝对；左边距：10px；宽度：400px；高度：400px；背景:url($img),#f00;背景混合模式：变亮；混合混合模式：变暗；}}得到如下效果：简单解释：因为图片本身不是红色和青色，所以这两种颜色需要通过background-image进行叠加，并使用background-blend-mode:lighten使其出现。为了让中间叠加的部分保持原来的颜色，需要再添加一个mix-blend-mode:darken来反转这个过程。（不懂的同学可以开启调试，手动关闭几种混合模式，自己感受一下）完整DEMO：图片类抖音LOGO毛刺效果当然这里用gif图片是完全可以的，我们把它们替换成我们的Gif图片，看看你会得到什么样的效果：有点意思，完整代码可以点这里：iKUN-使用background-blend-mode|mix-blend-mode实现抖音LOGO效果当然多图融合混合模式不止于此。让我们再做一个有趣的效果。首先找一张地球地图，可能是这个样子的（是不是有点眼熟）：把我们的角色放在上面，得到这样的效果：神奇的是，如果我们在叠加的动画上加上动画在它的混合模式下，会发生什么？试试看：通过混合模式mix-blend-mode:multiply，将大部分非人物背景巧妙地消除，然后使用filter:contrast(3)加深效果，彻底去除动画背景，融入我们地球的背景。这样，我们就巧妙地将两张图片合并为一张图片。当然调试多了调试多了会有不同的效果。这里我实现了两种不同的效果。完整代码如下：
div{position:relative;保证金：自动；宽度：400px；高度：500px；伸缩收缩：0；背景：url(earth.jpg);背景尺寸：封面；背景位置：0-150px；不重复；&::之前{内容：“”；位置：绝对；顶部：240px；左：160px；宽度：70px；高度：90px；背景：var（cxk.gif）；-位置：-30px0；混合混合模式：相乘；过滤器：对比度（3）；}}.white{&::before{混合混合模式：颜色减淡；过滤器：反转（1）对比（3）；}}.black{&::before{背景：var(--bgUrl),#000;背景尺寸：封面；背景位置：-70px0；混合混合模式：相乘；过滤器：反街（3）；}}这样，我们得到了两种不同的效果：完整的Demo，可以点这里：CodePenDemo--CSSiKUNAnimationkillsthebackground上面的效果不错，但是还远远不够有时候，我们只是想突出显示主题较多，不想看到太多的背景元素。怎么做？在这里，我介绍两个非常好的技巧。当然，这个技巧可能对图片本身有一点点要求。第一个技巧是我在这篇文章中介绍过的一个技巧——巧妙利用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;背景：url(xxx)中心/封面；背景剪辑：文本；过滤器：灰度（1）；mix-blend-mode:hard-light;}会得到这样神奇的效果，通过混合模式的叠加处理，保留文字的亮部，而暗部与黑色背景融合：当然，我们更想要的是人的显示被保留了，而Gif图片的背景部分被隐藏了，完美！这里，我们继续优化代码。我们希望将经过grayscale()处理后的原图的明暗部分替换掉。恰好在filter中，有一个invert()函数，可以将输入图像的颜色值进行反转。因此，在grayscale()之后，再次使用invert(1)函数：body{background:#000;}p{color:transparent;背景：url(xxx)中心/封面；背景剪辑：文本；过滤器：灰度（1）反转（1）；mix-blend-mode:hard-light;}OK，到此为止，我们已经用纯CSS实现了这样一个匪夷所思的文字效果：合理的添加混合模式mix-blend-mode可以更好的去除背景的干扰，在实际使用中，根据不同图片的颜色需要进行一定的调试。CodePenDemo-iKUNAnimation另一种去除背景的方法。难道只有去除图片背景，保留主角吗？当然不仅如此，还有其他方式。接下来，我们不使用background-clip:text，而是使用另一种混合模式和滤镜的方式来去除背景干扰。我们继续Demo1的例子，就是如下效果：在这个例子的基础上，我们直接添加filter:grayscale(1)invert(1)和mix-blend-mode:hard-light，像这样：。混合{背景:url($img),#0ff;背景混合模式：变亮；过滤器：灰度（1）反转（1）；混合混合模式：强光；&::after{内容：'';位置：绝对；左边距：10px；背景:url($img),#f00;背景混合模式：变亮；混合混合模式：变暗；}}看效果：哇，怎么做到的呢？调试一下，可以更好的揭开谜底：这里核心函数是filter:grayscale(1)invert(1)，mix-blend-mode:hard-light的意思是让一些不太明显的背景直接消除了比较。完整代码可以戳：CodePenDemo--iKUNAnimation有意思再动，但还不够。让我们回到背景剪辑：文本效果。背景图在动，能不能把文字也动起来？这样整个动画就在一个Gif图里，我们的内容也在双重动画效果下。试试看。为了在这里尝试更多效果，我使用了CSS-doodle库。这里我们需要做的最核心的事情是：使用background-clip:text只展示文字部分背景图片的特征。一、设置多个重叠每个DIV的DIV一起使用文中介绍的技巧设置背景图片，使用滤镜：grayscale(1)invert(1)，只显示人的部分给每个DIV添加文字内容，添加background-clip:text随机设置文字的初始高度定位通过动画让文字移动，设置不同的animation-delay以上其实只是一些核心流程介绍，大家可以结合代码看下，完整的CSS-doodle代码如下：:doodle{@size:70vmin70vmin;}:container{位置：相对；过滤器：灰度（1）反转（1）；}位置：绝对；插图：0；:after{位置:绝对;内容：”-----”;插图：0；字体大小：24px；行高：0；颜色：透明；背景：url(xxx)中心/封面；背景剪辑：文本；填充顶部：@r（69vmin）；动画：移动.5s@r(-0.99s)无限线性；}@keyframes移动{0%{padding-left:0}100%{左填充：70vmin；}}html,body{位置：相对；保证金：0；宽度：100%；高度：100%；显示：弹性；对齐项目：居中；中心;溢出：隐藏；背景色：#000；cursor:pointer;}这样我们就得到了一个图片在动，内容也在动的效果：当然，这个效果可能有点乱！其实你可以想象一下，固定图片，通过background-clip:text揭示图片的内容，同时让文字内容动起来。如果去掉background-clip:text再看下图，可能会更好理解一点：当然，其实如果去掉background-clip:text，就不会像上图那样了，因为这里每一层都会用到一张背景图，background-clip不能引用到它的子元素，只能作用于它自己。所以这部动画也是有硬伤的。如果层数过多，效果会卡住。CodePenDemo--CSSDoodle-iKUNAnimation修改每个DIV的文字内容，效果不一样，比如把内容替换成...，可以得到这样的效果：CodePenDemo--CSSDoodle-iKUNAnimation3D透视图是OK，最后让我们试试3D视角。使用CSS，我们可以轻松实现3D多面体，像这样：如果我们把每边的图片换成上面的效果，然后把我们的视角放在中间，会发生什么？看看八面体图片墙：试着把透视放在3D图片墙的中间：哇，是不是很有趣？完整的demo可以点击这里：iKUNAnimation不断变换视角，可以获得不同的观感体验，如果对观感体验感兴趣，可以自行调试。综上所述，本文介绍了一些使用CSS通过Gif图实现的有趣例子。当然，CSS的威力远不止于此。这篇文章只是挖了一个方向，从突出人物的方向出发，罗列了一些我觉得比较有意思的动态效果。核心使用混合模式、滤镜、背景剪辑、CSS-Doodle和一些动画。这些是您在日常生活中可能不会使用太多的属性。如果你对这些属性了解不多，望进阶。不妨再看看我的这些文章：不可思议的混合模式mix-blend-mode不可思议的混合模式background-blend-modeCSS奇技俱qiao|使用混合模式实现文字镂空波浪效果使用混合模式让文字智能适配背景巧妙使用background-clip实现超强文字动态效果深入探讨filter和backdrop-filter的异同除了filter，是还有其他方法可以使网站变灰吗？本文到此结束。希望这篇文章对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。
