1

我在 HTML 页面中有两个图像。一种是黑白的，另一种是彩色的。我想使用自定义动画从黑白图像过渡到彩色图像。我正在寻找的效果是图像出现黑白的地方，然后似乎是逐笔“绘制”的颜色。

我能想到的最简单的方法是创建一个动画 gif，它从白色开始，然后逐笔画成黑色。然后我可以使用绝对定位将彩色图像放在黑白图像的顶部，并用动画 gif 遮盖彩色图像。

但是，在追求之前，我到处搜索，看看是否有人做过类似的事情，我一直无法找到任何例子。这甚至可能吗，你能举个例子吗？

或者，有没有更好的方法来达到这个效果？

4

2 回答 2

0

如果您只有两个图像，那么交叉淡入淡出两个重叠的图像非常简单

 @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}

看这里的演示 3 和 4 http://css3.bradshawenterprises.com/cfimg/

于 2013-06-08T17:10:27.887 回答
0

我已经为你完成了一半的工作

对于这个 html

<id class="base">
</id>

这个CSS

.base {
    width: 200px;
    height: 200px;
    border: solid 1px black;
    position: absolute;
}

.base:before, .base:after {
    background-image: url("http://placekitten.com/200/300"); 
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
}

.base:after {
    -webkit-filter: grayscale(1);
    -webkit-mask-size: 200px 200px;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 70px, rgba(0, 0, 0, 0) 80px); 
}

你得到（在2个伪元素中）原始图像和灰度图像。（为此，您需要一个 webkit 浏览器）。

然后，使用蒙版文件将灰度图像变为透明。

我没有任何带有透明胶片的 gif，所以我无法测试最终结果，但我认为它应该可以工作。（只需将 .webkit-mask-image 更改为 url(gif)

如果有效，请分享您的结果！

演示

是的，这是一种矫枉过正，但一旦你得到它的工作，你可以适应另一个图像没有工作！

使用动画 gif 作为掩码更新了演示

于 2013-06-08T17:21:24.083 回答