重复图片并设置鼠标悬停CSS

Question

我想制作以下动画：

一个div有两个相同的箭头，当鼠标悬停在第一个箭头上时，它应该向左/右移动。我试图做到这一点，但没有成功。我正在使用两个图像设置背景，但我如何为其中一个图像设置类似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;
}

- Stephanie Kostova

---

你能分享箭头的真实图像吗？ - Temani Afif

这是一个精灵 -> https://imgur.com/a/Ql49ftI - Stephanie Kostova

我编辑了我的回答，包括颜色更改。 - Temani Afif

Answer 1

尝试使用2个不同的带有相同箭头的div，采用绝对定位并使用此方法重叠两个箭头。如果可以，请使用单个图像，而不是sprite。然后在其中一个图像上悬停时应用效果。

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>

- Gabriel B.

---

没问题，但是如何在悬停时将箭头颜色更改为红色，就像gif中一样？ - Stephanie Kostova

你必须在精灵中添加一个红色箭头，或者开始使用SVG图像，在CSS中更改图像颜色。或者使用两个不同颜色的单独png图像。 - Gabriel B.

Answer 2

您可以像下面这样调整background-position。您可以从不同的位置开始，然后将它们变成相同的位置：

.arrow {
  background: 
   url(https://i.imgur.com/u7cYXIo.png) -10px -185px,      
   url(https://i.imgur.com/u7cYXIo.png) 10px -185px,
   red;
  background-repeat:no-repeat;
  height: 50px;
  width: 50px;
  transition:all 0.5s;
}

.arrow:hover {
  background-position:10px -185px;
}

<div class="arrow"></div>

或者相反。

.arrow {
  background: 
   url(https://i.imgur.com/u7cYXIo.png),      
   url(https://i.imgur.com/u7cYXIo.png),
   red;
  background-position:10px -185px;
  background-repeat:no-repeat;
  height: 50px;
  width: 50px;
  transition:all 0.5s;
}

.arrow:hover {
  background-position:
    -10px -185px,
    10px -185px;
}

<div class="arrow"></div>

如果您想调整颜色，可以考虑使用mix-blend-mode

.arrow {
  background: 
   url(https://i.imgur.com/u7cYXIo.png),      
   url(https://i.imgur.com/u7cYXIo.png),
   #000;
  background-position:10px -185px;
  background-repeat:no-repeat;
  height: 50px;
  width: 50px;
  transition:all 0.5s;
  position:relative;
}
.arrow:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: red;
  mix-blend-mode: multiply;
  opacity:0;
  transition:all 0.5s;
}

.arrow:hover {
  background-position:
    -10px -185px,
    10px -185px;
}
.arrow:hover:before {
  opacity:1;
}

<div class="arrow"></div>

- Temani Afif