1

как сделать такой эффект, чтобы при наведении на кнопку, рисовалась стрелка. то есть не сразу полностью появлялась, а сначала как бы рисовалась линия (от 1 пикселя до 80, например) а после рисования линии, чтобы нарисовались две отходящие линии введите сюда описание изображения

2
  • 1
    Ну для начала можно попробовать погуглить. А если что-то не получится то уже задать вопрос. Вот такой пример можно спроецировать на стрелку codepen.io/Rybak/pen/xwwYVR
    – user212578
    3 окт 2017 в 22:10
  • @РашенБеар пожалуйста, старайтесь избегать комментариев про погуглить. 6 окт 2017 в 11:13

2 ответа 2

3

Можете сделать такой эффект плавно меняя ширину объекта:

div{
  background: url(https://i.stack.imgur.com/L2rdN.png) no-repeat left -73px bottom -34px;
  height:50px;
  width: 154px;
  transition:width .6s;
}
div:hover{
  width:289px;
}
<div></div>

PS Каков вопрос - таков ответ, т.к. кода не представлено никакого

2
  • спасибо, но а как сделать, чтобы сначала нарисовалась горизонтальная линия, а потом (только после того, как закончилась отрисовка линии), как бы выезжали две маленькие линии, выходящие из конца той горизонтальной
    – user269428
    4 окт 2017 в 19:57
  • по тому же принципу, разделите на 2 элемента, сделайте для второго анимацию с задержкой, пока первый не раскроется
    – kizoso
    5 окт 2017 в 6:23
3

Идея в более раннем ответе верна - просто и надёжно. Но, для достижения желаемого эффекта, нужно добавить ещё один элемент и использовать анимацию:

.button {
  position: relative;
  height: 44px;
  width: 156px;
  background: url(https://i.stack.imgur.com/L2rdN.png) no-repeat -73px -234px;
}

.button:hover .arrow {
  animation: 1s ease-out forwards draw_arrow;
}

.arrow {
  position: absolute;
  height: 5px;
  width: 0px;
  top: 18px;
  left: 110%;
  background: url(https://i.stack.imgur.com/L2rdN.png) no-repeat -241px -239px;
  opacity: 0.0;
}

@keyframes draw_arrow {
  0% { width: 0px; height: 5px; top: 18px; background-position: -241px -257px; opacity: 0.0; }
  1% { width: 0px; opacity: 1.0; }
  60% { width: 122px; height: 5px; top: 18px; background-position: -241px -257px; }
  100% {  width: 122px; height: 42px; top: 0px; background-position: -241px -239px; opacity: 1.0; }
}
<div class="button">
  <div class="arrow"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.