5

Всем привет.
Помогите пожалуйста сделать анимацию стрелы при наведении, как на Gif и анимацию ссылки. SVG и GIF прилагаются.


введите сюда описание изображения

введите сюда описание изображения

Пробовал добавить под стрелку "палку" чтобы просто смещать стрелку которая находилась поверх этой самой "палки", но выглядит это не красиво, ко всему прочему очень бросается в глаза, видно что наложены друг на друга две картинки. Если говорить про ссылку (вторая GIF), там даже представления нет как это сделать.

SVG вертикальной стрелки:

<svg xmlns="http://www.w3.org/2000/svg" width="23.585" height="14.323" viewBox="0 0 23.585 14.323" fill="none" stroke="#07af82" stroke-width="3" transform="rotate(90)">
<path d="M400.156,946h20.7" transform="translate(-400.156 -938.862)"/>
<path d="M399.785,935.5l6.263,5.908-6.263,6.263" transform="translate(-384.616 -934.406)"/>
</svg>

SVG обводки (мышки):

<svg xmlns="http://www.w3.org/2000/svg" width="30.294" height="46.371" viewBox="0 0 30 46" fill="#1160e8">
<path d="M32.347,17A14.953,14.953,0,0,0,17.2,31.754V48.617A14.953,14.953,0,0,0,32.347,63.371,14.953,14.953,0,0,0,47.494,48.617V31.754A14.953,14.953,0,0,0,32.347,17Zm11.54,31.617a11.544,11.544,0,0,1-23.081,0V31.754a11.544,11.544,0,0,1,23.081,0Z" transform="translate(-17.2 -17)"/>
</svg>

SVG стрелки для слайдера:

<svg xmlns="img/svg/arrow-next.svg" width="62.571" height="23.107" stroke="#fff" stroke-width="2" fill="none">
<path d="M400.156,946h60.765" transform="translate(-400.156 -935.497)"/>
<path d="M399.785,935.5l11.152,10.521L399.785,957.17" transform="translate(-349.801 -935.497)"/>
</svg>

Ну и для ссылки SVG стрелки:

<svg xmlns="http://www.w3.org/2000/svg" width="11.992" height="20.056" viewBox="0 0 11.992 20.056" fill="none" stroke="#1160e8" stroke-width="3">
<path d="M1300.558,1952.586l8.819-8.976-8.819-8.977" transform="translate(-1299.488 -1933.581)"/>
</svg>

P.S. Хотелось бы увидеть реализацию на CSS (без использования JavaScript), если это вообще возможно... Но в любом случае все рабочие варианты - это варианты и они нужны.

2
  • 1
    "... реализацию на CSS чистом..." Что Вы имеете в виду? Без SVG совсем? Или без SVG в разметке, но допускается в CSS ?
    – UModeL
    12 ноя 2020 в 16:35
  • 3
    Прошу прощения. Это имелось ввиду без JS. SVG пусть остаются
    – Alexandr
    12 ноя 2020 в 16:48

3 ответа 3

9

Немного косметики не помешает, но уже вроде все работает.

body {
  width: 100vw;
  height: 100vh;
  background: #222;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  font-size: 20px;
  color: #fff;
  font-family: Verdana;
  cursor: pointer;
}

a span {
  display: inline-block;
}

a.link-1 span.text {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
      writing-mode: tb-rl;
  padding-bottom: 20px;
  padding-left: 4px;
}

a.link-1 span.img {
  display:block;
}

a.link-1:hover span.text {
  -webkit-transform: translate(0, 10px);
  -ms-transform: translate(0 10px);
      transform: translate(0 10px);
}

a.link-1 svg {
  width: 28px;
}

a svg *,
a span.text {
  -webkit-transition-duration: 200ms;
       -o-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  shape-rendering: geometricPrecision;
}

a.link-1:hover svg line:nth-child(2) {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0 20px);
      transform: translate(0 20px);
}

a.link-1:hover svg polyline,
a.link-1:hover svg line:nth-child(3) {
  -webkit-transform: translate(0, 30px);
  -ms-transform: translate(0 30px);
      transform: translate(0 30px);
}

a.link-2 svg {
  width: 62px;
}

a.link-2:hover svg * {
  -webkit-transform: translate(20px, 0);
  -ms-transform: translate(20px 0);
      transform: translate(20px 0);
}

a.link-3 {
  color: #1160e8;
}

a.link-3 svg {
  width: 48px;
}

a.link-3:hover span.text {
  -webkit-transform: translate(-10px, 0);
  -ms-transform: translate(-10px, 0);
      transform: translate(-10px, 0);
}

a.link-3:hover svg path {
  -webkit-transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);
      transform: translate(10px, 0);
}

a.link-3 svg path:nth-child(1),
a.link-3:hover svg path:nth-child(3) {
  opacity: 0;
}

a.link-3:hover svg path:nth-child(1),
a.link-3 svg path:nth-child(3) {
  opacity: 1;
}

div.left {
  width: 80px;
  height: 100px;
  float: left;
}

div {
  padding: 10px;
}
<div class="left">
  <a class="link-1" href="#">
    <span class="text">Больше</span>
    <span class="img">
       <svg viewBox="0 0 28 70" 
            stroke-width="2" stroke="#00f" 
            fill="none">
         <path d="M2,13A10,10 180 1 1 26,13v20A10,10 180 1 1 2,32v-20Z"/>
         <line x1="14" y1="10" x2="14" y2="32" stroke="#0f0"/>
         <line x1="14" y1="10" x2="14" y2="32" stroke="#0f0"/> 
         <line x1="14" y1="10" x2="14" y2="32" stroke="#0f0"/>
         <polyLine points="8,26,14,32,20,26" stroke="#0f0"/>
       </svg>
     </span>
   </a>
</div>
<div>
  <a class="link-2" href="#">
    <span class="text">01 / 06</span>
    <span class="img">
      <svg viewBox="0 0 62 22" 
           stroke="#00f" 
           stroke-width="4" 
           fill="none">
        <line x1="-20" y1="11" x2="40" y2="11" />
        <polyline points="30,1 40,11 30,21" />
      </svg>
    </span>
  </a>
</div>
<div>
  <a class="link-3" href="#">
    <span class="text">Узнать больше</span>
    <span class="img">
      <svg viewBox="0 0 48 20" 
           fill="none" 
           stroke="#1160e8" 
           stroke-width="3">
        <path d="M1,19l9-9-9-9"/>
        <path d="M11,19l9-9-9-9"/>
        <path d="M21,19l9-9-9-9"/>
      </svg>
    </span>
  </a>
</div>

7
  • 1
    Всё ещё не работает)
    – Alexandr
    12 ноя 2020 в 20:06
  • 2
    @Alexandr уже лучше?
    – DiD
    12 ноя 2020 в 20:39
  • 1
    То, что нужно, но не работает в Chrome. Может и в других браузерах тоже, на FF точно сработало. Но если нет кроссбраузерности, это проблема...
    – Alexandr
    12 ноя 2020 в 22:10
  • 2
    @Alexandr, да я забыл прописать префиксы -webkit-, просто в canary edition почему-то работало и без префиксов
    – DiD
    12 ноя 2020 в 22:20
  • 2
    @Alexandr последняя версия должна работать даже в Internet Explorer
    – DiD
    12 ноя 2020 в 22:35
6

По второй гифке: P.S. Очень много костылей, но работает вроде. Палками прошу не бить.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  
}
.center {
  position: absolute;
  left: 50%;
  top: 50vh;
  transform: translate(-50%, -50%);
}
.link, .link > a {
  font-family: 'Roboto';
  text-decoration: none;
  color: #5082bf;
  font-size: 14pt;
  font-weight: 600;
}

.link > a {
  position: relative;
  transition: 0.4s;
  left: 0pt;
}
.link > a:hover {
  left: -16pt;
}


.link > .decoration {
  position: relative;
  display: inline-block;
  width: 10pt;
  height: 10pt;
  transition: 0.2s;
  left: 0pt;
  border-top: 3px solid #5082bf;
  border-right: 3px solid #5082bf;
  transform: rotate(45deg);
}
.link:hover > .decoration {
  left: 7pt;
}


.link > .decoration::before {
  position: absolute;
  transition: opacity 0.2s;
  content: '';
  width: 10pt;
  height: 10pt;
  border-top: 3px solid #5082bf;
  border-right: 3px solid #5082bf;
  left: 5pt;
  top: -7pt;
  opacity: 1;
}
.link:hover > .decoration::before {
  opacity: 0;
}

.link > .decoration::after {
  position: absolute;
  transition: opacity 0.2s;
  content: '';
  width: 10pt;
  height: 10pt;
  border-top: 3px solid #5082bf;
  border-right: 3px solid #5082bf;
  left: -5pt;
  top: 3pt;
  opacity: 0;
}
.link:hover > .decoration::after {
  opacity: 1;
}
<div class="center">
    <div class="link">
      <a href="#" class="arrow-right">Узнать больше</a>
      <span class="decoration"></span>
    </div>
  </div>

3

Анимация стрелки мышки

Основана на анимации изменения атрибута d у path стрелки

При наведении курсора мышки на вертикальный текст Узнать больше path отвечающий за исходное положение стрелки, заменяется на финальный path - при выдвинутой стрелке

#txt {
fill:white;
font-weight:400;
font-size:20px;
transition:1s;
}
#txt:hover {
font-weight:900;
}
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="30" height="220" viewBox="0 0 30 220" > 

<rect width="100%" height="100%" fill="#7B7C82" />
<text id="txt"  x="26" y="-10"  transform="rotate(89.4) translate(-20, 0)" >Узнать больше 
  
</text>
<path fill="#1160e8" d="M 15.1,146.7 A 15,15 0 0 0 0,161.5 v 16.9 a 15,15 0 0 0 15.1,14.8 15,15 0 0 0 15.1,-14.8 V 161.5 A 15,15 0 0 0 15.1,146.7 Z m 11.5,31.6 a 11.55,11.55 0 0 1 -23.1,0 v -16.9 a 11.55,11.55 0 0 1 23.1,0 z"/> 

<path  fill="#4BC5AE" stroke="#4BC5AE" stroke-width="2" d="m 13.3,155.7 v 16.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -16.8 z" >
   <!-- Анимация стрелки -->
   <animate attributeName="d"
     begin="txt.mouseover"
     fill="freeze"
     restart="whenNotActive"
     dur="1s"
     values="
           m 13.3,155.7 v 16.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -16.8 z;
           m 13.3,155.7 v 50.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -50.8 z;
           m 13.3,155.7 v 16.8 H 7.1 l 7.8,8.7 7.7,-8.7 h -6.3 v -16.8 z"
           
            /> 
</path>
</svg>

Анимация стрелки слайдера по клику

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="124" height="46" viewBox="0 0 62 23" fill="#1160e8">

<!-- Закраска фона серым цветом, иначе белую стрелку будет не видно. В проекте эту строку нужно будет удалить -->
<rect width="100%" height="100%" fill="#7B7C82" />

<path
     style="fill:white;stroke:white;stroke-width:0.5;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4"
     d="M 2.0764927,8.0379454 H 30.291095 v -5.660457 l 9.102627,8.7201636 -9.102627,9.638076 V 14.157359 H 2 Z"> 
     <!-- Анимация закраски белой стрелки в синий цвет при клике -->
   <animate attributeName="fill" begin="svg1.click" dur="0.1s" values="#000;#1160e8" fill="freeze" />  
     <animate id="stroke"   attributeName="stroke" begin="svg1.click" dur="0.1s" values="#000;#1160e8" fill="freeze" />  
     <!-- Анимация роста стрелки   -->
  <animate attributeName="d"
     begin="stroke.end"
     fill="freeze"
     restart="whenNotActive"
     dur="0.5s"
     values="
           M 2.0764927,8.0379454 H 30.291095 v -5.660457 l 9.102627,8.7201636 -9.102627,9.638076 V 14.157359 H 2 Z;
           
           M 2.0764927,8.0379454 H 46.291095 v -5.660457 l 9.102627,8.7201636 -9.102627,9.638076 V 14.157359 H 2 Z" /> 
</path>
</svg>

4
  • 1
    Как заставить двигаться стрелку если наводиться буду на внешний блок с текстом "Узнать больше" (как на гифке)?
    – Alexandr
    12 ноя 2020 в 19:25
  • 1
    @Alexandr это можно сделать, включив надпись в один SVG и присвоив ей id/ Если оставить надпись в html, то тоже можно, так сделать, но будет работать только в FF, в Chrome работать не будет Сейчас добавлю вариант. 12 ноя 2020 в 19:30
  • 1
    @Alexandr посмотрите, переработал вариант с вертикальной стрелкой и добавил вариант анимации стрелки слайдера 12 ноя 2020 в 21:23
  • 1
    Стрелка слайдера должна удлиняться при наведении и оставаться таковой до того как мы уберём с неё мышку. С вертикальной больше похоже, но опять же, она должна оставаться длинной до того, как мы её уберём. Хотя опять же вертикальная не учитывая этого нюанса делает что надо, но можем ли мы тексту задать "transition" для более плавной анимации?
    – Alexandr
    12 ноя 2020 в 22:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.