Question

我希望创建一个可以滑动图像但不使用传统幻灯片CSS动画的动画，这无法达到我想要的结果，因此基本上该动画包含2个图像，两个图像相似（包含相同的图像）内容相同的尺寸），但是颜色却是相反的。

我实现的代码只向左或向右滑动图像，我想做相同的动画，但是将图像保持在同一位置，就像滑动时一样，它显示背景图像的内容，但进度却相反

我当时正在考虑将动画应用于裁剪剪辑而不是实际图像，以下是我所面临问题的有效解决方法。

$(".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>

使用Clipaths显示/滑动图像

1 个答案: