Javascript 使用CSS逐渐更改图像（擦除过渡）

我有个奇怪的问题。这很奇怪，因为我很难解释我的意思。我意识到，我可以得到一些负面反馈，但没有其他地方可以问

我正在搜索的是CSS中的一种技术（如果不可能，也可以是JavaScript），它可以逐渐改变悬停时的图像。我不希望它淡出或改变整个图像一次。我想要的是有一个图像，当我用鼠标悬停它时，图像的悬停部分会改变，我越悬停我的图像，我就越能看到另一个图像。我希望这个描述足够了。对不起，我不知道这叫什么

我在这里做了一些类似的想法（） 但这是滚动的，我希望这发生在我用鼠标悬停图像时

希望你能理解我在这里说的一切

提前谢谢

编辑： 这里有两张图片，以便更好地理解我的想法。黑线表示该线上的某个位置（垂直方向）是鼠标光标。如果我将鼠标悬停在左侧，黑线将向左移动，并显示其他图像的一部分。所以基本上一开始是这张猴子的照片，然后，无论我在哪里停留，都会出现一条黑线，在右边显示另一张图片

编辑2： 伙计们，我们找到了一个活生生的例子来说明我的意思： 但图像不同。 现在我要问的是我该如何做，或者它的名称是什么，因为我的问题没有答案。 我也会为其他正在搜索此标题的人更改标题的名称

编辑3： 我们找到了答案，这正是我想要的：

JS

CSS

HTML

---

您要寻找的术语是“交叉褪色”。有一个例子可以在hover上使用，但我不确定如何只对悬停图像的一部分使用它（这会使整个悬停图像褪色）。如果您想让它只在鼠标所在的位置进行交叉淡入淡出，您可能需要转到画布api来擦除像素，但我不确定

HTML:

---

要创建jsBin演示中显示的效果，即滚动上的“幻灯片”，您可以尝试以下纯CSS方法：

.container{
位置：相对位置；
高度：200px；
宽度：400px；
边框：1px实心#CCC；
显示器：flex；
弯曲方向：立柱；
背景：url(http://lorempixel.com/400/200/);
溢出：隐藏；
}
.容器.步骤{
边框：1px虚线rgba（255255,0.2）；
弹性：1；
位置：相对位置；
z指数：2；
}
.container.newimg{
背景：url(http://lorempixel.com/g/400/200/)固定不重复9px 9px；
位置：绝对位置；
高度：100%；宽度：100%；
底部：0；左侧：0；
z指数：1；
过渡：底部。3s；
}
.container.step:n类型（1）：悬停~.newimg{
底部：25%；
}
.container.step:n类型（2）：悬停~.newimg{
底部：50%；
}
.container.步骤：第n个类型（3）：悬停~.newimg{
底部：75%；
}
.container.步骤：第n个类型（4）：悬停~.newimg{
底部：100%；
}

---

我会使用canvas+CSS来实现这一点。这是因为它可以让你完全控制鼠标的移动，并且提供了一种简单的方法来引入横杆和不同类型的擦拭（对角线、自定义等），如果你以后愿意的话

• 将背景图像定义为画布元素的CSS
• 在剪切到鼠标位置的顶部图像中绘制

例子

var ctx=c.getContext（“2d”），
img=新图像（）；//要显示的图像
img.onload=启动；
img.src=“//i.imgur.com/mS4R13a.png”；
函数start（）{
c、 onmousemove=函数（e）{
var r=this.getBoundingClientRect（），
x=e.clientX-r.left；
clearRect（0，0，c.width，c.height）；//为新绘图清除画布
ctx.drawImage（img，0，0，x，c.height，0，0，x，c.height）；//将图像剪辑并绘制到x
ctx.fillRect（x，0，5，c.height）；//画一条细黑条
};
}

#c{
背景：url（//i.imgur.com/GQ6xVAT.png）；
背景尺寸：封面；
}

---

所以效果应该看起来像a？我在你的图像中看不到任何效果sent@IsraGab您必须滚动输出选项卡。滚动将兔子替换为黑猩猩。没问题。对于其他人来说，搜索“scratch ticket CSS”会发现以下示例：这与您的请求几乎相同：。我怀疑您可以调整此示例，使其不需要单击，而只需鼠标悬停上的事件。是否可以组装stacksnippet？

var ctx = c.getContext("2d"),
img = new Image();         // image to show

img.onload = start;
img.src = "link to img";

function start() {
  c.onmousemove = function(e) {
    var r = c.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height); 
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height); 
    ctx.fillRect(x, 0, 5, c.height); 
  };

}

#c {
  background: url(link to other img); 
  background-size: cover;
  }

<canvas id=c width=620 height=400></canvas>

  <div id="cf">
    <img class="bottom" src="/images/Cirques.jpg" />
    <img class="top" src="/images/Clown%20Fish.jpg" />
  </div>

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}