Question

我目前有一个带有彩色背景图片的Bootstrap网页。我希望图像以灰度开始，然后在页面加载后逐渐淡入颜色（不是悬停）。

使用CSS / HTML执行此操作的最佳方法是什么？

Answer 1

您可以使用CSS关键帧动画实现此目的。

您需要扩展以下内容：

@keyframes greyscale-fade-in {
    0%   { -webkit-filter: grayscale(100%); }
    100% { -webkit-filter: grayscale(0%); }
}


.image-selector {
    animation: greyscale-fade-in 1s ease-in forwards;
}

关键帧控制您在页面加载时如何调整图像。

需要告诉animation值要使用哪些关键帧（greyscale-fade-in），您希望动画持续多长时间（1s为1秒），转换的时间你想要（ease-in）。

forwards参数告诉动画仅从0％到100％运行，而不是从100％返回到0％。

动画规则需要应用于定位图片的选择器，因此请确保您的<img>或包装器<div>具有您可以定位的类。

有关动画的更多信息，请阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/animation

如何在加载时使背景图像从灰度渐变为彩色？

1 个答案: