html – 从黑白色到彩色的CSS过渡图像

发布时间：2020-12-14 23:51:38 所属栏目：资源来源：网络整理

导读：我见过很多黑白图像的网站都转换为带有：悬停选择器的彩色版本.我想要做的是相同但没有用户交互.例如,图像将在10秒后开始黑白并淡入其彩色版本. 这可能与CSS有关吗？解决方法像这样？ @keyframes toColor { 0% { -webkit-filter: grayscale(100%); filter:

我见过很多黑白图像的网站都转换为带有：悬停选择器的彩色版本.我想要做的是相同但没有用户交互.例如,图像将在10秒后开始黑白并淡入其彩色版本.

这可能与CSS有关吗？

解决方法

像这样？

@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">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!