基于 CSS 動(dòng)畫的 SVG 按鈕實(shí)例代碼
發(fā)布時(shí)間:2018-10-12 14:11:32 作者:佚名
我要評論

本文通過實(shí)例代碼給大家介紹了基于 CSS 動(dòng)畫的 SVG 按鈕的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
具體代碼如下所示:
<a href="#"> <svg> <rect></rect> </svg>Button </a> body { margin: 0; padding: 0; background: #000; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; line-height: 60px; text-align: center; font-family: sans-serif; text-transform: uppercase; font-size: 24px; letter-spacing: 4px; color: #fff; text-decoration: none; } a svg, a svg rect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: transparent; } a { svg rect { stroke: #00e2ff; stroke-width: 4; transition: 2s; stroke-dasharray: 60 200; stroke-dashoffset: 320; } &:hover { svg rect { stroke: #ff0; stroke-dasharray: 200 60; stroke-dashoffset: 0; } } }
總結(jié)
以上所述是小編給大家介紹的基于 CSS 動(dòng)畫的 SVG 按鈕,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
CSS+JS實(shí)現(xiàn)水滴漣漪動(dòng)畫按鈕效果的示例代碼
這篇文章主要介紹了CSS+JS實(shí)現(xiàn)水滴漣漪動(dòng)畫按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-08-26css實(shí)現(xiàn)抖音訂閱按鈕動(dòng)畫效果
這篇文章主要介紹了css實(shí)現(xiàn)抖音訂閱按鈕動(dòng)畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-12基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合
這篇文章主要介紹了基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動(dòng)畫集合,需要的朋友可以參考下2019-05-09- 這篇文章主要介紹了CSS實(shí)現(xiàn)菜單按鈕動(dòng)畫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-04-12
純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕
這篇文章主要介紹了純css實(shí)現(xiàn)Material Design中的水滴動(dòng)畫按鈕的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-26基于css實(shí)現(xiàn)炫酷按鈕動(dòng)畫效果案例代碼
按鈕在開發(fā)中使用的頻率非常的高,ui 框架中的按鈕組件也都是層出不窮,今天教大家僅用 css 實(shí)現(xiàn)一些非常炫酷的按鈕效果,感興趣的朋友跟隨小編一起學(xué)習(xí)吧2023-02-28