今天我們使用 svg rect 中的 stroke-dasharray 和stroke-dashOffset 來完成一個(gè)炫酷 的 按鈕。
基本的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 的時(shí)候使用此屬性才能使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;
}
來看一下效果
效果
顯而易見而咆，我們可以看出胖腾，在動(dòng)畫的實(shí)現(xiàn)過程中烟零，stroke-dasharray 和stroke-dashOffset在起作用。
用法超級(jí)簡(jiǎn)單,
學(xué)會(huì)這兩個(gè)屬性之后可以做很多有趣的動(dòng)畫咸作，這里拋磚引玉瓶摆，大家多多探索，歡迎私信交流性宏。
