mix-blend-mode:darken/light模式的应用实例页面

展示

代码

• HTML：

  <h4>渐变文字</h4>
  <div class="gradient-text">CSS新世界</div>
  
  <h4>纹理不断变化的文字效果</h4>
  <div class="complex-text">CSS新世界</div>

• CSS：

  .gradient-text,
  .complex-text {
      position: relative;
      font-size: 3rem;
      color: black;
      font-weight: bold;
  }
  .gradient-text::before {
      content: "";
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;
      background: linear-gradient(to right, deepskyblue, deeppink);
      mix-blend-mode: lighten;
  }
  .complex-text {
      overflow: hidden;
  }
  .complex-text::before {
      content: "";
      position: absolute;
      width: 300px; height: 300px;
      left: calc(50% - 150px); top: calc(50% - 150px);
      background: repeating-linear-gradient(-135deg, deepskyblue 0px  4px, deeppink 5px 9px);
      mix-blend-mode: lighten;
      animation: spin 6s linear infinite;
  }
  @keyframes spin {
      form { transform: rotate(0); }
      to { transform: rotate(360deg); }
  }