免责声明:我不想将图像从左向右移动。我在 Stack Overflow 上浏览了相当多的答案，所有这些答案都指的是从左到右移动图像。
我尝试过过渡和使用背景位置。我希望我的动画能够将灰度图像从左到右转换为彩色图像。就像颜色应该从左到右出现一样。动画应该类似于图像的彩色版本，从左到右与灰度图像重叠。
这是我到目前为止所做的:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#pp").addClass('prog_load')
});
});
</script>
<style>
.button {
background-color: #000000;
border: none;
cursor: pointer;
color: #ff0000;
padding: 8px 16px;
text-align: center;
display: inline-block;
font-size: 12px;
box-shadow: 2px 1px 4px #000000;
}
.button:active {
background-color: #ff0000;
color: #000000;
box-shadow: 2px 1px 4px #000000;
transform: translateY(2px);
}
.prog_bar {
filter: grayscale(100%);
}
.prog_load {
filter: grayscale(0%);
transition: all 10s ease;
}
</style>
</head>
<body>
<button class = "button" id = "button"> Claik meh </button>
<img src = imgurl class = "prog_bar" id = "pp">
</body>
</html>
它所做的只是将灰度图像转换为彩色。
最佳答案
这就是罗伯特所说的......
$(".effect img").each(function() {
$this = $(this);
imgS = $this.attr("src");
$this.after("<div class='effect-dup'><img src='" + imgS + "' /></div>")
});
$("button").click(function() {
$this = $(this);
$(this).prev().addClass("cool-effect");
})* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.effect {
position: relative;
}
.effect-dup {
filter: grayscale(100%);
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 0;
transition: width 1s ease-in-out;
}
.effect-dup.cool-effect {
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="effect">
<img src="https://placeimg.com/640/480/nature" />
<button>
See cool effect
</button>
</div>
<div class="effect">
<img src="https://placeimg.com/640/480/tech" />
<button>
See cool effect
</button>
</div>纯 CSS 和 HTML:
body {
margin: 0; /*neccessary for effect*/
}
.effect {
position: relative;
}
.effect-dup {
filter: grayscale(100%);
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 0;
animation: width 1s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes width {
from {
width: 0;
}
to {
width: 100%;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="effect">
<img src="https://placeimg.com/640/480/nature" />
<div class='effect-dup'><img src="https://placeimg.com/640/480/nature" /></div>
</div>
<div class="effect">
<img src="https://placeimg.com/640/480/tech" />
<div class='effect-dup'>
<img src="https://placeimg.com/640/480/tech" />
</div>
</div>关于jquery - 从左到右将图像从灰度动画化为彩色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43004210/