css - 复制图像并设置悬停 CSS

Question

我想做以下动画：

一个带有 2 个相同箭头的 div 和悬停第一个箭头应该向左/向右移动。我试图这样做，但没有成功。我正在使用 2 张图片设置背景，但是如何为 1 张图片（如 gif）设置动画？

.arrow-right2 {
    content: "";
    background: transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat, transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat;
    height: 35px;
    position: absolute;
    top: -5%;
    left: 0;
    width: 35px;
}

标签： csscss-animationsarrows

Answer 1

尝试使用具有相同箭头的 2 个不同 div，绝对位置，并使用它来重叠两个箭头。如果可以，请使用单个图像，而不是精灵。然后在其中一张图像上应用悬停效果。

body {
  background: red;
   display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  position: relative;
}
.arrow1 {
  background: url('https://i.imgur.com/u7cYXIo.png') no-repeat -17px -199px;
	width: 12px;
	height: 24px;
  display: block;
  left: 0;
  position: absolute;
}
.arrow2 {
  background: url('https://i.imgur.com/u7cYXIo.png') no-repeat -17px -199px;
	width: 12px;
	height: 24px;
  display: block;
  position: absolute;
  transition: all 0.4s;
  left: 0;
}
.arrow2:hover {
  left: -10px;
  transition: all 0.4s;
}

<div class="container">
  <div class="arrow1">
  </div>
  <div class="arrow2">
  </div>
</div>