重要属性 mix-blend-mode
参见 https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

mix-blend-mode 是CSS属性之一，用于控制元素的内容应如何与其背景以及后面的元素的内容混合。它是创建网页设计视觉效果的强大工具，被大多数现代Web浏览器支持。

mix-blend-mode 属性接受一个值，该值指定元素的内容应如何与背景混合。可能的值是与不同混合模式对应的关键字。一些最常用的混合模式包括：

  • normal: 默认值，元素的内容将在背景上方绘制，不进行任何混合。
  • multiply: 元素内容的颜色与背景颜色相乘。
  • screen: 元素内容的颜色被反转，然后进行乘法，最后再次反转，然后与背景混合。
  • overlay: 元素的内容与背景以一种强调两者对比的方式混合。
  • color-dodge: 元素内容的颜色变亮，然后与背景混合。
  • color-burn: 元素内容的颜色变暗，然后与背景混合。
  • hard-light: 元素内容以一种强调背景高光和阴影的方式与背景混合。
  • soft-light: 元素内容以一种创建柔和、散射效果的方式与背景混合

右下角是白色，中间有一个锐利的色彩转折点。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>快速计算</title>
  <style>
    .loader {
      height: 300px;
      background: linear-gradient(60deg, #000 50%, #fff 50%);
      border: 4px solid #333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p {
      font-size: 25px;
      transition: .8s;
      mix-blend-mode: difference;
      color: #fff;
      font-weight: bold;
    }
    .loader:hover p {
      transform: translateX(-100px);
    }
  </style>
</head>

<body>
  <div class="loader">
    <p>右下角是白色，中间有一个锐利的色彩转折点。</p>
  </div>

</body>

</html>