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>

动画背景颜色将从顶部覆盖

1 个答案: