CSS＆SVG动画

Question

我正在研究按钮悬停效果。我已经设法让它悬停在动画上，但是我正在努力扭转动画。

我已经尝试改变笔画数组和偏移量，但似乎都没有有效的工作。

这里是我的标记：

.btn { 
 
\t  background: #e02c26; 
 
    \t  font-weight: 100; 
 
    \t  color: #fff; 
 
    \t  cursor: pointer; 
 
    \t  display: inline-block; 
 
    \t  font-size: 16px; 
 
    \t  font-weight: 400; 
 
     \t line-height: 45px; 
 
     \t margin: 0 auto 2em; 
 
     \t max-width: 160px; 
 
     \t position: relative; 
 
     \t text-decoration: none; 
 
     \t text-transform: uppercase; 
 
     \t vertical-align: middle; 
 
     \t width: 100%; 
 
    } 
 

 
    .btn span { 
 
    \t position: absolute; 
 
\t  width: 100%; 
 
    \t text-align: center; 
 
    } 
 

 
    .btn svg { 
 
     \t height: 45px; 
 
     \t left: 0; 
 
     \t position: absolute; 
 
     \t top: 0; 
 
     \t width: 100%; 
 
    } 
 

 
    .btn rect { 
 
     \t fill: none; 
 
     \t stroke: #565656; 
 
     \t stroke-width: 2; 
 
    \t  stroke-dasharray: 422, 0; 
 
    } 
 

 
    .btn:hover { 
 
     \t background: rgba(225, 51, 45, 0); 
 
     \t font-weight: 900; 
 
     \t letter-spacing: 1px; 
 
    } 
 

 
    .btn:hover rect { 
 
    \t  stroke-width: 5; 
 
     \t stroke-dasharray: 15, 310; 
 
     \t stroke-dashoffset: 48; 
 
     \t -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
     \t transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
    }

<a href="#" class="btn"> 
 
     <svg> 
 
    \t  <rect x="0" y="0" fill="none" width="100%" height="100%"/> 
 
     </svg> 
 
     <span>Hover</span> 
 
    </a>

Answer 1

您需要设置在.rect，而不是悬停的过渡，因为如果你把它放在悬停，只有过渡适用于鼠标输入，不适用于鼠标输出，

但是，如果您将其设置为。正确它将双向工作。

设置转换中.btn rect {...}而不是.btn:hover rect {...}

见代码片段：

.btn { 
 
    background: #e02c26; 
 
    font-weight: 100; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    line-height: 45px; 
 
    margin: 0 auto 2em; 
 
    max-width: 160px; 
 
    position: relative; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    vertical-align: middle; 
 
    width: 100%; 
 
} 
 

 
.btn span { 
 
    position: absolute; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.btn svg { 
 
    height: 45px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.btn rect { 
 
    fill: none; 
 
    stroke: #565656; 
 
    stroke-width: 2; 
 
    stroke-dasharray: 422, 0; 
 
    -webkit-transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
    transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); 
 
} 
 

 
.btn:hover { 
 
    background: rgba(225, 51, 45, 0); 
 
    font-weight: 900; 
 
    letter-spacing: 1px; 
 
} 
 

 
.btn:hover rect { 
 
    stroke-width: 5; 
 
    stroke-dasharray: 15, 310; 
 
    stroke-dashoffset: 48; 
 
}

<a href="#" class="btn"> 
 
    <svg> 
 
     <rect x="0" y="0" fill="none" width="100%" height="100%"/> 
 
    </svg> 
 
    <span>Hover</span> 
 
</a>