只是想知道它是否可能,但我正在尝试在加载时制作我的页面,在大约 4 秒的时间内从黑白过渡到彩色 - 整个页面、文本、div、图像,所有内容。
我已经制作了一张黑白图像,可以通过悬停过渡到彩色版本,是否与此类似?但是有了 wrapper ?
img.desaturate {
animation: toColour 10s;
}
@keyframes toColour {
0% { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
25% { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
50% { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
50% { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
100% { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}
或者让每件东西的颜色单独过渡?
是否有更好的方法或仅使用 css 的可能方法?
提前致谢
最佳答案
我不明白为什么不,只需在包装器中使用动画即可:
代码片段:
@keyframes toColour {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
25% {
-webkit-filter: grayscale(75%);
filter: grayscale(75%);
}
50% {
-webkit-filter: grayscale(50%);
filter: grayscale(50%);
}
50% {
-webkit-filter: grayscale(25%);
filter: grayscale(25%);
}
100% {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
.wrapper {
background-color: royalblue;
animation: toColour 4s;
}
p {
color: cyan;
}
<div class="wrapper">
<p>
Example text with color
</p>
<img src="http://fillmurray.com/500/500">
</div>
关于html - CSS 将 html 页面从黑白转换为带有 css 的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38807256/