javascript - 使用剪辑路径显示/滑动图像

Question

我想创建一个滑动图像的动画，但不使用传统的幻灯片 CSS 动画，这没有达到我想要的结果，所以基本上动画包含 2 个图像，两个图像相似(包含相同的内容大小相同)但颜色相反。

我实现的代码只将图像向左或向右滑动，我想做相同的动画但将图像保持在同一个位置，就像它滑动时会显示背景图像内容，但颜色会反转.

我正在考虑将动画应用于 clipath 裁剪而不是实际图像，下面是我面临的问题的有效 jsfiddle。

$(".btn").click(function() {
  $(".reveal").toggleClass("show");
})

html,
body {
  background-color: #333;
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center
}

.reveal {
  overflow: hidden;
  position: relative;
  display: inline-block;
}

.reveal:after {
  content: " ";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://i.imgur.com/UBOmQ7T.jpg');
  z-index: 2;
  transition: all 2s ease;
}

.reveal.show:after {
  left: 100%
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="reveal">
  <img src='https://i.imgur.com/R6978y3.jpg' />
</div>
<br />
<button class="btn">Reveal!</button>

https://jsfiddle.net/v7fte3m8

Answer 1

您可以使用多个背景来执行此操作。诀窍是将其中之一的 background-clip 设为 content-box 然后调整填充以创建显示效果:

.box { 
  width:300px;
  height:200px;
  box-sizing:border-box;
  
  background:
    url('https://i.imgur.com/UBOmQ7T.jpg'),
    url('https://i.imgur.com/R6978y3.jpg');
  background-clip:
    content-box,
    padding-box;
  background-size:cover;
  background-position:center;
  
  transition:1s all;
  padding-left:0;
}

.box:hover {
  padding-left:300px;
}

<div class="box">

</div>

如果你的图像总是颜色反转，你可以考虑原始图像和 invert() 过滤器:

.box { 
  width:300px;
  height:200px;
  box-sizing:border-box;
  
  background:
    url('https://i.imgur.com/R6978y3.jpg');
  background-size:cover;
  background-position:center;
  
}
.box:before {
  content:"";
  display:block;
  height:100%;
  background:inherit;
  background-clip:content-box;
  box-sizing:inherit;
  transition:1s all;
  padding-left:0;
  filter:invert(1);
}

.box:hover:before {
  padding-left:300px;
}

<div class="box">

</div>