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

Question

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

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

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

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

提前致谢！

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

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

编辑3：我们已经找到了答案，这正是我所寻找的：

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
• 在顶部图像中绘制剪裁到鼠标位置

例

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

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

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

Answer 2

要创建jsBin演示中显示的效果（滚动时为“幻灯片”），您可以尝试这种纯CSS方法来执行此操作：

 .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%; } 

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

逻辑/说明：

基本上我们有一个带有图像的容器，里面有“步骤”，当盘旋时，会改变另一个包含另一个图像的孩子。 第二个图像具有fixed附件以创建视差效果。

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

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

它的输出将如下所示：

 .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%; } 

 <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> 

jsFiddle与SCSS / SASS： https ：//jsfiddle.net/azizn/q4Lye8he/

jsFiddle只有4个步骤： https ：//jsfiddle.net/azizn/e92c6avj/

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

Answer 3

你正在寻找的术语是“交叉淡入淡出”。 这里有一个例子在这里上悬停的作品，虽然我不知道你会怎么做它，你将鼠标悬停在图像的只是一部分（此淡出悬停整个事情）。 如果你想让它只在鼠标所在的地方淡入淡出，你可能不得不去Canvas api擦除像素，但我不确定。

HTML：

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

而CSS：

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