滚动时翻转线性渐变

Question

我使用的是 45 度角的线性渐变，但当我向下滚动时，我希望它翻转，而不是仅仅重复，以便颜色匹配。

这就是我现在拥有的；

body {
      height: 100vh;
      width: 100vw;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      background: rgb(253, 41, 123);
      background: linear-gradient(
        45deg,
        rgba(253, 41, 123, 1) 0%,
        rgba(255, 88, 100, 1) 47%,
        rgba(255, 101, 91, 1) 100%
      );
    }
    
    
    div {
      height: 1500px;
    }

<div></div>

谁能帮帮我？ TIA！

Answer 1

这是一个使用 mask 的想法，其中的诀窍是创建两个具有相反梯度的不同图层，遮罩将创建交替的“孔”以查看底部的图层：

html {
  min-height: 100vh;
  position: relative;
  z-index: 0;
  background: rgb(253, 41, 123);
  background: 
    linear-gradient( to top right, rgba(253, 41, 123, 1) 0%, rgba(255, 88, 100, 1) 47%, rgba(255, 101, 91, 1) 100%) 
    0 0/100% 100vh;
}

html::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient( to bottom right, rgba(253, 41, 123, 1) 0%, rgba(255, 88, 100, 1) 47%, rgba(255, 101, 91, 1) 100%) 
    0 0/100% 100vh;
  -webkit-mask: repeating-linear-gradient(transparent 0 100vh, #fff 0 200vh)
}

div {
  height: 1500px;
}

<div></div>

滚动时翻转线性渐变

Flip linear-gradient when scrolling

css

linear-gradients