微信訂閱號：rabbit_svip
微信訂閱號：rabbit_svip
通過偽元素實現(xiàn)下圖效果
HTML代碼
<a href="#">RABBIT</a>
CSS代碼
body {
background: #353535;
}
a {
width: 200px;
display: block;
position: relative;
border: 2px solid #D24D57;
margin: 40px auto;
padding: 14px 16px;
font-size: 20px;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
}
a:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 0%;
left: 50%;
top: 50%;
z-index: -1;
background: #D24D57;
transform: translateX(-50%) translateY(-50%) rotate(-25deg);
-webkit-transition: all 0.75s ease 0s;
-moz-transition: all 0.75s ease 0s;
-o-transition: all 0.75s ease 0s;
transition: all 0.75s ease 0s;
}
a:hover:after {
height: 300%;
}
想要從中間開始擴張開來阱持，需要偽元素設(shè)置position: absolute;
然后把top和left都設(shè)置成50%，再通過transform的translate設(shè)置回-50%。
這個作用是讓元素從中心開始發(fā)生改變（如果要做改變的話）。
transform: rotate(-25deg)的作用是把偽元素旋轉(zhuǎn)-25度唯鸭，這樣就有傾斜效果了。
最后記得設(shè)置偽元素z-index: -1;
這個值的作用是不讓偽元素遮住文字層赘方。
a:hover:after {
height: 300%;
}
當(dāng)鼠標(biāo)經(jīng)過<a>標(biāo)簽時，偽元素的高度發(fā)生改變弱左。
HTML與CSS 目錄：HTML與CSS
上一篇：【CSS】圖片動畫特效（相框）
下一篇：【CSS】按鈕特效 - 2
