CSS转换图像从黑白色到彩色

时间:2016-07-13 03:46:03

标签: html css css-animations

我见过很多网站都有黑白图像,过渡到带有:hover选择器的彩色版本。我尝试做的是相同但没有用户互动。例如,图像将在10秒后开始黑白并淡入其彩色版本。

这可以用CSS吗?

2 个答案:

答案 0 :(得分:12)

喜欢这个?



@keyframes toColor {
    0%    { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    25%   { -webkit-filter: grayscale(75%); filter: grayscale(75%); }
    50%   { -webkit-filter: grayscale(50%); filter: grayscale(50%); }
    75%   { -webkit-filter: grayscale(25%); filter: grayscale(25%); }
    100%  { -webkit-filter: grayscale(0%); filter: grayscale(0%); }
}


img.desaturate { 
   animation: toColor 10s;
}

<img src="http://i.imgur.com/gMPdDHk.jpg" alt="Lena Söderberg" style="width: 300px;" class="desaturate">
&#13;
&#13;
&#13;

答案 1 :(得分:0)

另一种使用 rollOver 行为的简单方法,以便在图像悬停时启动图像着色动画。

img{ filter: grayscale(100%); transition: filter .3s ease-in-out;}
img:hover { filter: none;}