关于前端:开局一张图构建神奇的-CSS-效果

40次阅读

共计 5822 个字符，预计需要花费 15 分钟才能阅读完成。

假如，咱们有这样一张 Gif 图：

利用 CSS，咱们尝试来搞一些事件。

图片的 Glitch Art 风

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

像是这样：

假如，咱们有这样一张图：

只须要一个标签即可

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

给两张同样的图片，叠加上 青色#0ff 和 红色#f00，并且错开肯定的间隔，两张图都要加上 background-blend-mode: lighten，其中一张再加上 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;
  }
}

失去如下成果：

简略解释下：

  1. 因为图片自身不是红色和青色的，所以须要通过 background-image 叠加上这两种色彩，并通过 background-blend-mode: lighten 让其体现进去
  2. 为了放弃两头叠加局部的原色，须要再叠加一个 mix-blend-mode: darken 反向解决一下。（不了解的同学能够关上调试，手动关掉几个混合模式，本人感触感触即可）

残缺的 DEMO：

图片的类抖音 LOGO Glitch 成果

当然，这里应用 Gif 图也是齐全能够的，咱们替换下咱们的 Gif 图，看看会失去什么样的一种成果：

有点意思，残缺的代码你能够戳这里：iKUN – 应用 background-blend-mode | mix-blend-mode 实现类抖音 LOGO 晕眩成果

多图交融

混合模式当然不止是这样。

咱们再来实现一个乏味的成果。

首先，找一张地球图，可能像是这样（是不是有点眼生）：

把咱们的人物放上去，失去这样一种成果：

神奇的事件在于，如果，咱们给叠加在下面的动图，增加一个混合模式，会产生什么呢？尝试一下：

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

解决后的图片，大略会是这样：

<img width=”389″ alt=”image” src=”https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ce4c7e953854458fb219f8184eefa7fe~tplv-k3u1fbpfcp-zoom-1.image”>

基于一张黑白底色的图片，咱们再使用 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;
}

将会失去这样一种神奇的成果，通过 混合模式的叠加解决，文字的亮部将会保留，而暗部则会与彩色背景交融：

<img width=”363″ alt=”image” src=”https://user-images.githubusercontent.com/8554143/207828575-0af65ac0-761b-46c8-ace8-79c44ee2ce5e.png”>

当然，咱们更心愿的是，人的局部展现保留，而 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，可能更好的去除背景的烦扰，理论应用的时候依据不同图片的色彩须要进行肯定的调试。

CodePen Demo – iKUN Animation

另一种干掉背景的形式

那是不是只有上述的形式能够干掉图片的背景，保留主体人物局部呢？

当然不止，还有其余形式。上面，咱们不借助 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 这个库，这里咱们外围要做的事件是：

  1. 借助 background-clip: text 只展现文字局部的背景图的个性，首先设置多个重叠在一起的 DIV
  2. 每个 DIV 都借助文章下面介绍的技巧，设置背景图，利用 filter: grayscale(1) invert(1)，只展现人的局部
  3. 给每个 DIV 增加文本内容，增加 background-clip: text
  4. 随机给文本设置初始高度定位
  5. 通过动画让文本动起来，并且设置不同的 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

一直扭转 perspective，还能够失去不一样的观感体验，感兴趣的，能够本人调试调试。

总结

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

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

外围用到了混合模式、滤镜、background-clip、CSS-Doodle 以及配合了一些动画，这些日常中大家可能用的不太多的属性，如果你对这些属性还不是特地理解，心愿进阶一下，无妨再看看我的这些文章：

  • 不堪设想的混合模式 mix-blend-mode
  • 不堪设想的混合模式 background-blend-mode
  • CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪成果
  • 利用混合模式，让文字智能适配背景色彩
  • 巧用 background-clip 实现超强的文字动效
  • 深入探讨 filter 与 backdrop-filter 的异同
  • 除了 filter 还有什么置灰网站的形式？
  • 深入浅出 CSS 动画

最初

好了，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

正文完
前端
发表至： 前端
2022-12-19
 0
关于前端:SVG-动画开发实战小册发布
关于前端:Canvas-入门
关于前端:监听键盘事件
关于前端:使用Nodejs创建一个密码生成器