Дублируйте изображение и установите наведите курсор мыши на CSS - PullRequest
Новая
       16

Дублируйте изображение и установите наведите курсор мыши на CSS

0 голосов
/ 30 ноября 2018

Я хочу сделать следующую анимацию:

enter image description here

Один 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;
}

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Попробуйте использовать 2 разных деления с одинаковыми стрелками с абсолютной позицией и используйте это, чтобы перекрыть две стрелки.Если можете, используйте одно изображение, а не спрайт.Затем примените эффект при наведении на одно из изображений.

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>
0 голосов
/ 30 ноября 2018

Вы можете настроить 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>
...