Line Button Animation

Question

Ich muss Animationslinien machen, wenn Sie auf die Schaltfläche, von der Mitte der oberen Zeile, die Linie sollte in verschiedene Richtungen gehen und ändern Sie die Farbe. über sollte so funktionieren, aber es beginnt oben Mitte:

codepen.io

<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

, check it out, jetzt die Linie geht im Uhrzeigersinn.

spielen nur mit .rect-shape ‚s stroke-dasharray und stroke-dashoffset Eigenschaften die Wirkung zu erhalten, die Sie am meisten zufrieden mit:

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

und für sicher, dass Sie positive oder negative dashoffset Werte setzen, und dann irgendwie Sie die Richtung ändern Animation

Nehmen Sie sich ein detaillierteres Beispiel hier auf offiziellen Seiten:

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>