CSS 按鈕特效

2021-09-24 17:27:47 字數 635 閱讀 6616

通過偽元素實現下圖效果

html**

rabbit
css**
body 


a a:after 


a:hover:after
想要從中間開始擴張開來，需要偽元素設定position: absolute;

然後把top和left都設定成50%，再通過transform的translate設定回-50%。

這個作用是讓元素從中心開始發生改變（如果要做改變的話）。

transform: rotate(-25deg)的作用是把偽元素旋轉-25度，這樣就有傾斜效果了。

最後記得設定偽元素z-index: -1;

這個值的作用是不讓偽元素遮住文字層。

a:hover:after
當滑鼠經過標籤時，偽元素的高度發生改變。

html與css 目錄：html與css

CSS 按鈕特效 二

div class arrow arrow left middle arrow left middle div div class arrow arrow left top arrow left top div div class arrow arrow left bottom arrow left...

CSS3 按鈕特效 一

其實使用背景顏色變化就可以的 但是這裡為了做統一 fade before,fade after fade left before,fade right before,fade center out before,fade center out after,fade center in before,...

CSS3 按鈕特效 一

其實使用背景顏色變化就可以的 但是這裡為了做統一 fade before,fade after fade left before,fade right before,fade center out before,fade center out after,fade center in before,...