html - 从顶部覆盖的动画背景颜色

Question

我正在寻找一种从上到下覆盖背景颜色的方法。更具体地说，我希望它从上到下填充。目前我已经设法制作了一个“褪色”的动画。

这是我现在拥有的:

.page-dark {
  background: #003850;
  background-color: #003850;
  color: white;
  -o-animation: fadeIt 3s linear; 
  animation: fadeIt 3s linear; 
}

@-o-keyframes fadeIt {
  0%   { background-color: #ff711b; }
  50%  { background-color: #ff711b; }
  100% { background-color: #003850; }
}
@keyframes fadeIt {
  0%   { background-color: #ff711b; }
  50%  { background-color: #ff711b; }
  100% { background-color: #003850; }
}

Answer 1

您可以使用 linear-gradient() 创建具有两种颜色的背景.使用 background-size 将背景高度设置为 200% , 并使用 background-position 隐藏其中一种颜色.现在动画背景位置以显示其他颜色:

.page-dark {
  height: 90vh;
  background: linear-gradient(to bottom, #003850 50%, #ff711b 50%);
  background-size: 100% 200%;
  background-position: 0 100%;
  color: white;
  animation: slideColor 3s linear forwards; 
}

@keyframes slideColor {
  to { background-position: 0 0 }
}

<div class="page-dark"></div>

另一种选择是将要隐藏的颜色设置为背景，动画 background-position 显示第二个背景(我们使用 linear-gradient() 创建) >):

.page-dark {
  height: 90vh;
  background: #ff711b linear-gradient(to bottom, #003850 0, #003850 100%) no-repeat;
  background-size: 100% 0;
  color: white;
  animation: slideColor 3s linear forwards; 
}

@keyframes slideColor {
  to { background-size: 100% 100%; }
}

<div class="page-dark"></div>