開局一張圖，構建神奇的 CSS 效果

假設，我們有這樣一張 Gif 圖：利用 CSS，我們嘗試來搞一些事情。圖片的 Glitch Art 風在這篇文章中 --CSS 故障藝術，我們介紹了利用混合模式製作一種暈眩感覺的視覺效果。有點類似於抖音的 LOGO。像是這樣：假設，我們有這樣一張圖：只需要一個標簽即可 <div clas ...

假設，我們有這樣一張 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;
  }
}

得到如下效果：

簡單解釋下：

因為圖片本身不是紅色和青色的，所以需要通過 background-image 疊加上這兩種顏色，並通過 background-blend-mode: lighten 讓其表現出來
為了保持中間疊加部分的原色，需要再疊加一個 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);
}

處理後的圖片，大概會是這樣：

基於一張黑白底色的圖片，我們再運用 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，能夠更好的去除背景的干擾，實際使用的時候根據不同圖片的顏色需要進行一定的調試。

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 這個庫，這裡我們核心要做的事情是：

藉助 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;
}

這樣，我們就得到了一種圖在動，內容也在動的效果：