今天我們使用 svg rect 中的 stroke-dasharray 和stroke-dashOffset 來完成一個炫酷 的 按鈕。
基本的html
<svg width="400" height="400" viewBox="0 0 400 400">
<rect x="20" width="80" y="20" height="30"></rect>
<text x="60" y="40" text-anchor = 'middle'>HELLO</text>
</svg>
css
svg {
width: 400px;
height: 400px;
}
rect{
fill: none;
pointer-events: all; // 在 ‘fill = none 的時候使用此屬性才能使hover 效果生效’
cursor: pointer;
stroke: blue;
stroke-width: 1px;
stroke-dasharray: 20 60 20 10;
stroke-dashoffset: 10;
transition: all ease 0.4s;
}
rect:hover{
stroke-dashoffset: 0;
stroke-dasharray: 300;
}
來看一下效果
效果
顯而易見，我們可以看出，在動畫的實現過程中，stroke-dasharray 和stroke-dashOffset在起作用。
用法超級簡單,
學會這兩個屬性之后可以做很多有趣的動畫，這里拋磚引玉，大家多多探索，歡迎私信交流。
