css - 背景彩虹动画不起作用为什么？

Question

.rainbow {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: change 10s ease-in-out infinite;
}

@keyframes change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

如果我将彩虹类添加到 div 容器中，彩虹不起作用，为什么！？

标签： css

Answer 1

它不起作用，因为 background-position 将与背景图像一起使用，但不适用于颜色。

Js小提琴-> https://jsfiddle.net/MahuaSarkar/dxLsoqp0/

尝试这个：

<div class="rainbow ">
    <div>
    Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
    </div>
</div>

<style>
.rainbow {
  background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: change 1s ease-in-out infinite;
  
}
@keyframes change {
  0% {
    background: linear-gradient(-45deg, #23d5ab, #ee7752, #e73c7e, #23a6d5);
  }
  50% {
    background: linear-gradient(-45deg, #23a6d5, #23d5ab, #ee7752, #e73c7e);
  }
  100% {
    background: linear-gradient(-45deg, #e73c7e, #23a6d5, #23d5ab, #ee7752);
  }
}
</style>

希望有帮助！！