強大的css屬性mix-blend-mode實現文字故障效果

前言

這裏的圖片會上傳失敗，爲了更好的閱讀體驗你可以查看我的github原文

mix-blend-mode這個css屬性估計很多人都不熟悉，在寫這篇文章之前我甚至都沒在項目中使用過它，閱讀了相關的文章，發現這個屬性非常的強大，可以代替ps做一些圖層合併加濾鏡的效果。

先看下效果圖

點我查看demo

概念與用法

他描述元素的內容與元素的父元素的內容和背景如何混合。

初始值 normal
適用元素    all elements
是否是繼承屬性 否

他的可選枚舉值如下:這裏的示例背景使用這兩張圖片進行說明。
[圖片上傳失敗...(image-feec54-1545148734662)]
[圖片上傳失敗...(image-9bc00-1545148734662)]

示例css代碼如下

.container{
    width: 300px;
    height: 300px;
    background: url(pic1.jpg),
                url(pic2.jpg);
    background-size: cover;
    background-blend-mode: ***;
}

屬性值	描述	示例
normal	黑色層導致黑色最終層，白色層導致無變化。該效果類似於在透明膜重疊上印刷的兩個圖像，效果類似於兩張不透明的紙張重疊。	[圖片上傳失敗...(image-50a537-1545148734662)]
multiply	該效果類似於在透明膜重疊上印刷的兩個圖像。黑色層導致黑色最終層，白色層導致無變化。
screen	效果類似於照射到投影屏幕上的兩個圖像，黑色層導致無變化，白色層導致白色最終層。最終顏色是底部顏色較深的乘法結果，或底部顏色較淺的屏幕。
overlay	這種混合模式相當於硬光與層交換，最終顏色是底部顏色較深的乘法結果，或底部顏色較淺的屏幕。
darken	最終顏色是由每個顏色通道的最暗值組成的顏色。
lighten	最終顏色是由每個顏色通道的最亮值組成的顏色。
color-dodge	最終顏色是將底部顏色除以頂部顏色的倒數的結果。黑色前景導致沒有變化。具有背景的反色的前景將導致完全亮起的顏色。這種混合模式類似於屏幕，但前景只需要像背景的反轉一樣輕，以達到完全亮起的顏色。
color-burn	將值除以頂部顏色，並反轉該值的結果。這個最終顏色是反轉底部顏色。一個白色的前景導致沒有變化，具有背景的反色的前景導致黑色最終圖像。這種混合模式類似於乘法，但是前景只需要像背景的反轉一樣暗，以使最終圖像變黑。
hard-light	如果頂部顏色較暗，則最終顏色是乘法的結果，果頂部顏色較淺則是最終顏色。此混合模式相當於疊加，但交換了圖層。效果類似於在背景上發出刺眼的聚光燈
soft-light	效果類似於 擴散 一個在背景的聚光燈。
difference	黑色層沒有效果，而白色層反轉另一層的顏色。最終的顏色是從較淺的顏色中減去兩種顏色的較暗的結果
exclusion	最終顏色與差異相似，但對比度較低。與差異一樣，黑色層沒有效果，而白色層則反轉另一層的顏色。
hue	同時使用底部顏色的飽和度和亮度，最終顏色具有頂部顏色的色調。
saturation	最終顏色具有頂部顏色的色調，同時使用底部顏色的飽和度和發光度。純灰色的背景，沒有飽和，將沒有效果
color	最終顏色具有頂部顏色的色調和飽和度。而使用底部顏色的亮度，效果保留了灰度級別，可用於前景着色。
luminosity	最終顏色具有頂部顏色的亮度，同時使用底部顏色的色調和飽和度。隨着層交換，這種混合模式相當於顏色

文字故障效果

首先，先上html

    <div className="App">
        <h1>Larva</h1>
        <div className="bar"/>
    </div>

分解看幾個動畫

1. 當前文字也需要小角度左右偏移
2. 需要一個橫條模擬故障線條，需要垂直移動
3. 文字左右有兩個重影，需要水平移動

a.主文字小角度偏移

h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(0deg);
    font-size: 64px;
    font-family: Raleway, Verdana, Arial, sans-serif;
    animation: skewX 5s ease-in infinite;
    color:$t1;
  }

@keyframes skewX {
  78% {
      transform: translate(-50%, -50%) skewX(0);
  }
  79% {
      transform: translate(-50%, -50%) skewX(10deg);
  }
  80% {
      transform: translate(-50%, -50%) skewX(-10deg);
  }
  81% {
      transform: translate(-50%, -50%) skewX(0);
  }
}

b.白色故障條垂直移動

  &>.bar{
    position: relative;
    z-index: 4;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(0deg);
    width: 28%;
    height: 3px;
    background: #fa7268;
    animation: whiteMove 3s ease-out infinite;
    mix-blend-mode: luminosity; // 注意這裏使用了mix-blend-mode
  }
}

@keyframes whiteMove {
  8% {
    top: 60%;
  }
  10% {
      top: 59%;
  }
  12% {
      top: 55%;
  }
  99% {
      top:58%;
  }
}

c.主文字左右兩個重影

使用::before和::after這兩個僞元素實現，使代碼更“dry”。

  &>h1::before{
    display: inline-block;
    content: 'Larva';
    position: absolute;
    top: 0;
    left: 2px;
    height: 0px;
    color: rgba(255, 0, 0, 0.9);
    z-index: 2;
    animation: redShadow 1.5s ease-in infinite;
    text-shadow: 0.1px 0 0 red;
    mix-blend-mode: color-burn;// 注意這裏使用了mix-blend-mode
  }
  &>h1::after{
    display: inline-block;
    content: 'Larva';
    position: absolute;
    top: 0;
    left: -3px;
    height: 64px;
    overflow: hidden;
    z-index: 3;
    animation: redHeight 2s ease-out infinite;
    -webkit-filter: contrast(200%);
    mix-blend-mode: hard-light;// 注意這裏使用了mix-blend-mode
}

@keyframes redShadow {
  20% {
      left: -1px;
      height: 32px;
  }
  60% {
      left: 2px;
      height: 6px;
  }
  100% {
      left: -2px;
      height: 42px;
  }
}

@keyframes redHeight {
  20% {
      height: 42px;
  }
  35% {
      height: 12px;
  }
  50% {
      height: 40px;
  }
  60% {
      height: 20px;
  }
  70% {
      height: 34px;
  }
  80% {
      height: 22px;
  }
  100% {
      height: 0px;
  }
}

參考鏈接

1. mdn-mix-blend-mode

2.mixblendmode製作文字故障效果

關注我的訂閱號獲得更加及時的推送~