今天我們使用 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)單,

• stroke-dasharray

• stroke-dashOffset

學(xué)會(huì)這兩個(gè)屬性之后可以做很多有趣的動(dòng)畫，這里拋磚引玉，大家多多探索，歡迎私信交流。