Анимация линии кнопок

15 июля 2021, 16:50

Мне нужно сделать анимационные линии при наведении на кнопку, от середины нижней линии. Линия должна идти в разные стороны и менять цвет. Примерно так должно работать, но оно начинается сверху.

<section class="hero"> 
  <div class="svg-container"> 
    <a class="magic-link" href="#"> 
      <svg class="gradient" height="60" width="320" xmlns="http://www.w3.org/2000/svg"> 
          <defs> 
            <linearGradient id="gradient"> 
              <stop offset="0%" stop-color="#EB3349" /> 
              <stop offset="95%" stop-color="#EB3349" /> 
            </linearGradient> 
          </defs> 
          <rect class="rect-shape" height="60" width="320" /> 
          <div class="text">Hover me</div> 
        </svg> 
    </a> 
  </div> 
</section>

Answer 1

Посмотрите код, теперь линия идет по часовой стрелке.

Просто поиграйте со свойствами .rect-shape stroke-dasharray и stroke-dashoffset, чтобы получить эффект, который ваvм больше всего подойдет:

 stroke-dasharray: 140 620;
 stroke-dashoffset: 274;

И, конечно, вы можете поставить положительные или отрицательные значения dashoffset, тем самым меняя направление анимации.

Возьмите более подробные примеры здесь на официальных страницах:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

body { 
  max-width: 100vh; 
  margin: 0; 
  color: #fff; 
  font-size: 24px; 
  background: #EB3349; 
} 
 
a, a:hover, a:focus, a:active, a:visited { 
  color: #fff; 
  text-decoration: none; 
  font-size: 1em; 
} 
 
.hero { 
  height: 100vh; 
  width: 100vw; 
} 
 
.svg-container { 
  position: relative; 
  top: 50%; 
  transform: translateY(-50%); 
  margin: 0 auto; 
  width: 320px; 
  max-height: 60px; 
  cursor: default; 
} 
 
.rect-shape { 
  stroke-dasharray: 130 620; 
  stroke-dashoffset: 274; 
  stroke-width: 8px; 
  fill: url(#gradient); 
  /* modify this with the color you want */ 
  stroke: #fff; 
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; 
} 
 
.text { 
  font-family: serif; 
  font-size: 22px; 
  line-height: 32px; 
  letter-spacing: 4px; 
  color: #fff; 
  top: -48px; 
  position: relative; 
  text-align: center; 
} 
 
.svg-container:hover .rect-shape { 
  stroke-width: 2px; 
  stroke-dashoffset: 0; 
  stroke-dasharray: 760; 
} 
 
#gradient stop { 
  transition: .5s all; 
} 
 
.svg-container:hover svg.gradient #gradient stop:first-child { 
  stop-color: #EB3349; 
} 
 
.svg-container:hover svg.gradient #gradient stop:last-child { 
  stop-color: #f45c43; 
}

<section class="hero"> 
  <div class="svg-container"> 
     <a class="magic-link" href="#"> 
        <svg class="gradient" height="60" width="320" xmlns="http://www.w3.org/2000/svg"> 
          <defs> 
            <linearGradient id="gradient"> 
              <stop offset="0%" stop-color="#EB3349" /> 
              <stop offset="95%" stop-color="#EB3349" /> 
            </linearGradient> 
          </defs> 
          <rect class="rect-shape" height="60" width="320" /> 
          <div class="text">Hover me</div> 
        </svg> 
     </a> 
  </div> 
</section>