html - 如何使背景图像在加载时从灰度淡化为彩色？

Question

<分区>

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 value 需要被告知要使用哪些关键帧 ( greyscale-fade-in )，你希望动画持续多长时间 ( 1s 是 1 秒)，你想要什么时间转换 ( ease-in )。

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

动画规则需要应用于以您的图像为目标的选择器，因此请确保您的 <img>或包装器 <div>有一个你可以定位的类。

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