一个css属性就能这么好玩？

在前端开发领域，css的地位举足轻重，在很多场景下，不管是动画效果还是交互的实现，很多开发者第一时间就是想到的通过JavaScript来实现，但是其实很多场景下css也可以完成非常多有意思的交互，css的属性非常之多，想要去记住相对很困难，但是有的特别的属性，一个属性就可以完成很多意想不到的效果，我们先来看看我们今天实现的效果。

让你实现这样的一个效果你会想到什么呢，第一想法是css不好实现，使用JavaScript来实现么，或者是使用canvas来绘制么，很显然，这样的作法都过于复杂了，不是我们希望的样子，来看看css是如何实现的。

分析实现

首先我们想象一下这个东西如何对它分层，上层的文字就是一个简单的文字没什么特殊，但是文字有一个背景色是火焰的效果，并且还会动。

那么我们首先可以想到，如果文字可以是透明色，后面的背景自然就出来了，并且背景如果是一个gif图片或者video视频让他们动起来就可以实现这个效果了，似乎非常简单，但是我们如何可以让css实现这个效果呢，我们需要用到这个属性：

mix-blend-mode

mix和blend翻译过来都是混合的意思，这个特效的属性值也特别多，从字面意思来理解就是混合模式，这个模式我们日常最常见的就是photoshop，通过混合可以实现非常多的效果，先来给大家看看这个属性对应了多少种的属性吧：

   {
  mix-blend-mode: normal;         // 正常
  mix-blend-mode: multiply;       // 正片叠底
  mix-blend-mode: screen;         // 滤色
  mix-blend-mode: overlay;        // 叠加
  mix-blend-mode: darken;         // 变暗
  mix-blend-mode: lighten;        // 变亮
  mix-blend-mode: color-dodge;    // 颜色减淡
  mix-blend-mode: color-burn;     // 颜色加深
  mix-blend-mode: hard-light;     // 强光
  mix-blend-mode: soft-light;     // 柔光
  mix-blend-mode: difference;     // 差值
  mix-blend-mode: exclusion;      // 排除
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
  mix-blend-mode: luminosity;     // 亮度

  mix-blend-mode: initial;
  mix-blend-mode: inherit;
  mix-blend-mode: unset;
}

除去 initial 默认、inherit 继承 和 unset 还原这 3 个所有 CSS 属性都可以取的值外，还有另外的 16 个具体的取值，对应不同的混合效果。

这个属性个人感觉非常复杂，实验了一些属性感觉日常中应该也会很低频的使用到，这次我们就用mix-blend-mode: screen来完成上图的例子吧：

喷火的文字

实现这个呢我们只需要两层，一层放置我们的火焰背景，这个背景图不一定是火焰也可以是其他的自己可以随便替换，上面这一层再去显示我们的文字，再让两者进行混合即可实现：

Loading加载

这里其实看图就知道无非是三个div在沿着一个方向旋转，同时让三个方向的动画 有一定时间的延迟，但是呢我们如何没有这个属性不然其混合，最上面的这层肯定就是最后一层div呢，就只有三种颜色很不协调，一旦我们用了这个属性之后，就会通过混合让中间的交叉部分混合出第四种颜色，一下就感觉好看多了，但是这里还有一个点需要注意的是不同颜色混合出来的最终颜色是不同的，如果需要自己指定颜色则其他三个色也是需要在一定区间之内才可以完成的,这里就涉及到了差值算法就比较复杂了。

在线体验

下面是完整的体验地址，实现都特别简单，重要的是学习这样一个属性，让我们发动脑洞去思考是否可以去尝试更多玩法