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

Question

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

我正在搜索的是CSS中的一种技术（或者如果不可能，那么也是JavaScript），以便在悬停时逐渐更改图像。我不希望它一下子淡出或改变整个图像。我想要的是拥有一个图像，当我用鼠标悬停它时，图像的悬停部分会发生变化，我越是悬浮在我的图像上，我就越能看到另一个图像。我希望这个描述已经足够了。对不起，我不知道这是怎么回事。

我做了类似我在想的事情（https://jsbin.com/xurokogicu/edit?html,css,output） 但这是滚动的，我希望当我用鼠标悬停图像时会发生这种情况。

希望你理解我在这里说的任何话，

提前致谢！

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

EDIT2： 伙计们，我们找到了一个我的意思的实例：jpegmini.com 但随着不同的图像。 现在我要问的是我该怎么做，或者怎么称呼它，因为我的问题没有答案。  我也会为其他人搜索标题的名称。

EDIT3： 我们已经找到了答案，这正是我一直在寻找的：

JS

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); 
  };

}

CSS

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

HTML

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

Answer 1

我会使用canvas + CSS。这是因为它可以让你完全控制鼠标移动，并提供一种简单的方法来介绍条形和不同类型的擦拭巾（对角线，自定义等），如果你愿意的话。

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

实施例

＆＃13;

＆＃13;

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

img.onload = start;
img.src = "//i.imgur.com/mS4R13a.png";

function start() {
  c.onmousemove = function(e) {
    var r = this.getBoundingClientRect(),
        x = e.clientX - r.left;
    ctx.clearRect(0, 0, c.width, c.height);                     // clear canvas for new draw
    ctx.drawImage(img, 0, 0, x, c.height,  0, 0, x, c.height);  // clip and draw image to x
    ctx.fillRect(x, 0, 5, c.height);                            // draw a thin black bar
  };
}

＆＃13;

#c {
  background: url(//i.imgur.com/GQ6xVAT.png); 
  background-size: cover;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

创建jsBin演示中显示的效果，即＆＃34; slide＆＃34;在滚动上，您可以尝试这种纯CSS方法来执行此操作：

＆＃13;

＆＃13;

.container {
  position: relative;
  height:200px;
  width:400px;
  border:1px solid #CCC;
  display: flex;
  flex-direction: column;
  background: url(http://lorempixel.com/400/200/);
  overflow: hidden;
}

.container .step {
  border:1px dashed rgba(255,255,255,0.2);
  flex:1;
  position: relative;
  z-index:2;
}

.container .newimg {
  background: url(http://lorempixel.com/g/400/200/) fixed no-repeat 9px 9px;
  position: absolute;
  height:100%; width:100%;
  bottom:0; left:0;
  z-index:1;
  transition:bottom .3s;
}

.container .step:nth-of-type(1):hover ~ .newimg {
  bottom: 25%;
}
.container .step:nth-of-type(2):hover ~ .newimg {
  bottom: 50%;
}
.container .step:nth-of-type(3):hover ~ .newimg {
  bottom: 75%;
}
.container .step:nth-of-type(4):hover ~ .newimg {
  bottom: 100%;
}

＆＃13;

<div class="container">
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="newimg"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

逻辑/说明：

基本上我们有一个带有图像的容器，里面有＆＃34;步骤＆＃34;当它悬停时，会改变另一个包含另一个图像的孩子。第二张图片具有fixed附件以创建视差效果。

当然，通过添加更多步骤可以更顺畅，为了简化这一点，你可以创建一个SASS循环来计算每一步：

$steps: 10;
@for $i from 1 through $steps {
  .container .step:nth-of-type(#{$i}):hover ~ .newimg {
    bottom: $i * 1/$steps * 100%;
  }
}

输出结果如下：

＆＃13;

＆＃13;

.container {
  position: relative;
  height: 200px;
  width: 400px;
  border: 1px solid #CCC;
  display: flex;
  flex-direction: column;
  background: url(http://lorempixel.com/g/400/200/);
  overflow: hidden;
}
.container .step {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  flex: 1;
  position: relative;
  z-index: 2;
}
.container .newimg {
  background: url(http://lorempixel.com/400/200/) fixed no-repeat 9px 9px;
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0%;
  left: 0;
  z-index: 1;
  transition: .3s;
}

.container .step:nth-of-type(1):hover ~ .newimg {
  bottom: 10%;
}

.container .step:nth-of-type(2):hover ~ .newimg {
  bottom: 20%;
}

.container .step:nth-of-type(3):hover ~ .newimg {
  bottom: 30%;
}

.container .step:nth-of-type(4):hover ~ .newimg {
  bottom: 40%;
}

.container .step:nth-of-type(5):hover ~ .newimg {
  bottom: 50%;
}

.container .step:nth-of-type(6):hover ~ .newimg {
  bottom: 60%;
}

.container .step:nth-of-type(7):hover ~ .newimg {
  bottom: 70%;
}

.container .step:nth-of-type(8):hover ~ .newimg {
  bottom: 80%;
}

.container .step:nth-of-type(9):hover ~ .newimg {
  bottom: 90%;
}

.container .step:nth-of-type(10):hover ~ .newimg {
  bottom: 100%;
}

＆＃13;

<div class="container">
  <!-- emmet code: .step*10 -->
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="step"></div>
  <div class="newimg"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle with SCSS / SASS：https://jsfiddle.net/azizn/q4Lye8he/

jsFiddle仅适用于4个步骤：https://jsfiddle.net/azizn/e92c6avj/

唯一的缺点是必须为每个步骤创建额外的HTML标记。