调整元素大小时保持渐变大小

Question

如何创建在调整元素或元素的容器大小时保持其当前大小的渐变？

100% 宽度的框：当宽度减小到 60% 时想要的结果（注意颜色上的划分应该与原来的 100% 对齐）：宽度减小到 60% 时的当前结果：

我还需要 linear-gradient 没有绝对值 ()，因为我将在动态宽度元素中使用它。

@keyframes resize {
  50% {
    width: 50%
  }
  100% {
    width: 100%
  }
}

.box {
  height: 100px;
  width: 100%;
  background-image: linear-gradient( 90deg, red 50%, blue 50%);
  animation: resize linear 2s infinite;
}

<div class="box"></div>

Answer 1

定义渐变的固定大小：

@keyframes resize {
  50% {
    width: 50%
  }
  100% {
    width: 100%
  }
}

.box {
  height: 100px;
  width: 100%;
  background-image: linear-gradient( 90deg, red 50%, blue 50%);
  background-size:100vw 100%; /* added */
  animation: resize linear 2s infinite;
}

<div class="box"></div>

或固定：

@keyframes resize {
  50% {
    width: 50%
  }
  100% {
    width: 100%
  }
}

.box {
  height: 100px;
  width: 100%;
  background: linear-gradient( 90deg, red 50%, blue 50%) fixed;
  animation: resize linear 2s infinite;
}

<div class="box"></div>

或者您可以使用 clip-path 制作不同的动画来生成相同的视觉效果，而不是设置宽度动画：

@keyframes resize {
  0% {
    clip-path:inset(0 0% 0 0); /* width= 100% */
  }
  100% {
    clip-path:inset(0 50% 0 0); /* width= 50% */
  }
}

.box {
  height: 100px;
  width: 100%;
  background-image: linear-gradient( 90deg, red 50%, blue 50%);
  animation: resize linear 1s infinite alternate;
}

<div class="box"></div>

调整元素大小时保持渐变大小

Maintain gradient size when element is resized

css

linear-gradients