在这里,我创建了 3 张从彩色到灰度的图像,我想在悬停时显示颜色我做错了什么?
这是小提琴链接:
http://jsfiddle.net/4tHWg/6/
CSS代码:
.box {
float: left;
position: relative;
width: 14.285714286%;
}
.boxInner img {
width: 100%;
display: block;
}
.boxInner img:hover {
-webkit-filter: grayscale(0%);
}
@-webkit-keyframes toGrayScale {
to { -webkit-filter: grayscale(100%); }
}
.box:nth-child(1) img {
-webkit-animation: toGrayScale 1s 0.5s forwards;
}
.box:nth-child(2) img {
-webkit-animation: toGrayScale 2s 1s forwards;
}
.box:nth-child(3) img {
-webkit-animation: toGrayScale 3s 1.5s forwards;
}
还有另一种简单的解决方案。
.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);}
.grayscale:hover {
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);}
首先,您必须为灰度外创建另一个webkit动画。
@-webkit-keyframes offGrayScale {
to {
-webkit-filter: grayscale(0%);
}
}
比您创建悬停(对于每个 img)
.box:nth-child(1) img:hover {
-webkit-animation: offGrayScale 1s 0.5s forwards;}
.box:nth-child(2) img:hover {
-webkit-animation: offGrayScale 1s 0.5s forwards;}
.box:nth-child(3) img:hover {
-webkit-animation: offGrayScale 1s 0.5s forwards;}
http://jsfiddle.net/valentinzaraf/Ggqy6/