代码之家 › 专栏 › 技术社区 › WJA

要从顶部覆盖的动画背景色

css html

WJA · 技术社区 · 6 年前

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

这就是我现在所拥有的:

.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; }
}

1 回复 | 直到 6 年前

Ori Drori 6 年前

可以使用创建两种颜色的背景 linear-gradient() . 将背景高度设置为 200% background-size ,并使用隐藏其中一种颜色 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>

背景位置 显示第二个背景(我们使用 线性-梯度()

.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=“页面暗”></部门>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前