基于 CSS 動畫的 SVG 按鈕實(shí)例代碼
發(fā)布時間：2018-10-12 14:11:32 作者：佚名 
我要評論
我要評論本文通過實(shí)例代碼給大家介紹了基于 CSS 動畫的 SVG 按鈕的實(shí)現(xiàn)方法，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
具體代碼如下所示：
<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 動畫的 SVG 按鈕，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
CSS+JS實(shí)現(xiàn)水滴漣漪動畫按鈕效果的示例代碼
這篇文章主要介紹了CSS+JS實(shí)現(xiàn)水滴漣漪動畫按鈕，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-08-26
這篇文章主要介紹了css實(shí)現(xiàn)抖音訂閱按鈕動畫效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-12
基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動畫集合
這篇文章主要介紹了基于CSS 屬性實(shí)現(xiàn)按鈕懸停邊框和背景動畫集合,需要的朋友可以參考下2019-05-09
這篇文章主要介紹了CSS實(shí)現(xiàn)菜單按鈕動畫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2019-04-12
純css實(shí)現(xiàn)Material Design中的水滴動畫按鈕
這篇文章主要介紹了純css實(shí)現(xiàn)Material Design中的水滴動畫按鈕的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-26
基于css實(shí)現(xiàn)炫酷按鈕動畫效果案例代碼
按鈕在開發(fā)中使用的頻率非常的高，ui 框架中的按鈕組件也都是層出不窮，今天教大家僅用 css 實(shí)現(xiàn)一些非常炫酷的按鈕效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2023-02-28
