假设第一张图片是黑白的。 第二张图片是彩色的。 超时后，黑白图像应更改为彩色图像..带有动画 就像加载进度条一样？我如何使用 Css 或 JavaScript 做到这一点？
[为了清楚起见，添加了 OP 的评论，如下]
OP：是否可以使用一些缓慢的线性动画？像填充 玻璃中的水..黑白图像中的颜色填充？
【问题讨论】：
标签： javascript html css
首先使用position: absolute; 将两张图片放在彼此上方。使用背景图片，您可以这样做：
<div class="container">
<div class="image1"></div>
<div class="image2" id="image_resize"></div>
</div>
CSS：
.container {
position: relative;
width: 300px;
height:200px;
}
.image1 {
position: absolute;
width: 100%;
height: 100%;
background-image: url(http://images.freeimages.com/images/previews/cf6/bird-1394216.jpg);
background-repeat: no-repeat;
}
.image2 {
position: absolute;
height: 100%;
background-image: url(http://images.freeimages.com/images/previews/4f3/apple-1322812.jpg);
background-repeat: no-repeat;
}
要为第二张图片制作动画，最简单的方法是使用 jquerys animate。使用纯 javascript，您可以执行以下操作：
var percent = 0; // this will count from 0 to 100, defining the with in percent
/* with setinterval you can call a function periodically, in this example every 50 milliseconds */
var myInterval = window.setInterval(function() {
/* find the image that should get resized by id */
var img = document.getElementById('image_resize');
/* set the with of the image */
img.style.width = percent+"%";
/* increment by 1 percent */
percent ++;
if(percent > 100) {
/* when 100% is reached, stop the interval */
clearInterval(myInterval);
}
}, 50);
这是一个有效的 jsfiddle：https://jsfiddle.net/c51u6r8t/
【讨论】：
您可以将黑白图像置于完全不透明的彩色图像之上，并在需要时简单地淡出黑白图像。
setTimeout(function() {
document.getElementById("container").className = "revealed";
}, 500);#container {
position: relative;
}
#container .overlay {
position: absolute;
top: 0px;
left: 0px;
transition: opacity 1.5s ease-in-out;
}
#container.revealed .overlay {
opacity: 0;
}<div id="container">
<img src="http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2003/10/soho_image_28_october_2003/10098404-2-eng-GB/SOHO_image_28_October_2003_node_full_image_2.jpg">
<img class="overlay" src="http://dawn.jpl.nasa.gov/multimedia/images/dawn-image-070911.jpg">
</div>【讨论】：
我更了解您现在想要实现的目标。这可以通过::after 伪元素上的动画来实现。
工作示例：
div {
position: relative;
width: 190px;
height: 190px;
background-image:url('http://placekitten.com/190/190');
}
div::after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 190px;
height: 190px;
background-image:url('http://placekitten.com/190/190');
opacity: 0;
filter: grayscale(100%);
animation: waterfill 5s linear;
}
@keyframes waterfill {
0% {height: 190px; opacity: 1;}
20% {height: 190px; opacity: 1;}
100% {height: 0; opacity: 1;}
}<div></div>您可以像这样使用 CSS @keyframes 动画：
img {
width: 190px;
height: 190px;
filter: grayscale(0%);
animation: colorImage 5s linear;
}
@keyframes colorImage {
0% {filter: grayscale(100%);}
80% {filter: grayscale(100%);}
100% {filter: grayscale(0%);}
}<img src="http://placekitten.com/190/190" />动画总共需要 5 秒。
前 4 秒，图像是黑白的。
在最后一秒，图像转换为全彩色。
【讨论】：
希望这段代码对你有帮助
<script type="text/JavaScript">
var picCount=0; // global
var picArray= ["Header1.png","Header1.jpg"]
// Replace your original image names here
// gets next picture in array
function nextPic()
{ // check if adding 1 exceeds number of pics in array
picCount=(picCount+1<picArray.length)? picCount+1 : 0;
// build the img to write to page using the new pic reference
var build='<img border="0" src="'+picArray[picCount]+'" width="200" height="200">';
document.getElementById("imgHolder").innerHTML=build;
// repeat this after a puse of 2000ms (2sec).
setTimeout('nextPic()',2000)
}
</script>
将此添加到您的 html 页面
<body onload="setTimeout('nextPic()',2000)">
<div id="imgHolder">
<img border="0" src="Header1.jpg" width="300" height="300">
</div>
【讨论】：
如果我假设正确，第一张图片是第二张图片的去饱和版本，所以这里只需要一张图片：彩色的。要将其变成黑白图像，只需使用灰度滤镜：
img.desaturate {
filter: grayscale(100%);
}
并将此类添加到您的图像中：
<img id="myimage" src="image.jpg" class="desaturate">
如果你想要一个“动画”，你可以忘记类并通过 jQuery 动态添加样式：
$("#myimage").css("style","filter: grayscale("+(bytesLoadeed/bytesTotal*100)+"%);");
【讨论】：