css3按鈕好看的特效(一)

首先看一下如下效果，特效一是一個邊框漸出的效果，需要運用到svg去實作

看看html結構很簡單，一個按鈕div中套着一個用來實作邊線的svg和一個用來顯示文字的div，在svg中需要加入一個rect是svg中的矩形。

<div class="btn">
        <svg width="200" height="60">
            <rect width="200" height="60" class="rect"></rect>
        </svg>
        <div class="text">按鈕</div>
    </div>
           

如何實作出有邊線的效果需要了解的兩個 stroke-dasharray和 stroke-dashoffset；

1. stroke-dasharray：表示的意思是邊框虛線，兩個參數或者多個參數時：一個表示長度，一個表示間距

　　如：stroke-dasharray = ‘10, 5’ 表示：虛線長10，間距5，然後重複 虛線長10，間距5

　　如：stroke-dasharray = ‘20, 10, 5’ 表示：虛線長20，間距10，虛線長5，接着是間距20，虛線10，間距5，之後開始循環

　　

2. stroke-dashoffset：表示的是虛線的相對起始點的偏移量，這個需要結合着stroke-dasharray去使用不然沒有效果，，正數偏移x值的時候，相當于往左移動了x個長度機關，負數偏移x的時候，相當于往右移動了x個長度機關。

了解兩個的意思之後寫出如下的css便會得出如上面動圖所開始時文字下面一條線（實際是讓線偏移到了下面其他的透明輪廓都是虛線的間隙）

.rect{
            fill: transparent;
            stroke-width: 6;
            stroke: #ff6348;
            stroke-dasharray:  160 400;
            stroke-dashoffset: -281;
        }
           

實作邊線慢慢恢複需要添加動畫效果将stroke-dasharray的值設為邊框的總長度（目的是為了讓兩邊起到一個同時到達起點的視覺效果），然後恢複虛線的偏移量 stroke-dashoffset: 0，為了美觀可以将它的線寬度變窄，我是讓 stroke-width從6變到了2.

最後加上hover添加動畫效果即可如下方css

@keyframes go {
     to{
           stroke-dasharray: 520;
           stroke-dashoffset: 0;
           stroke-width: 2;
       }
 }
.btn:hover .rect{
    animation: go 0.3s linear forwards;
}
           

~~~~~~~~~~~~~~~~ end ~~~~~~~~~~~~~~~~~