CSS3繪製有活力的連結底線方法
- 高洛峰原創
- 2017-03-07 14:19:101532瀏覽
連結下劃線是非常常見的一種樣式，最近做了一個非常簡單的視覺效果，非常不錯，完整程式碼檢視。
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
background-color: #000;
}
h2{
text-align: center;
margin-top: 100px;
}
h2 > a {
position: relative;
color: #FFF;
text-decoration: none;
padding-bottom: 5px;
}
h2 > a:hover {
color: #FFF;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
</style>
</head>
<body>
<h2>
<a href="/">悬停在我上面</a>
</h2>
</body>
</html>
創建這種效果是非常簡單的，不需要添加額外的DOM元素到HTML，不過需要考慮瀏覽器的兼容性問題，在老舊版本的瀏覽器中它只會顯示為一個普通的底線。
好了，現在正式開始。我們需要做的第一件事就是移除text-decoration，並設定連結為相對定位。我們需要確保連結在hover時不會改變顏色，這裡我們拿h2舉例：
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
接下來，我們要新增border，透過變換隱藏它。插入一個:before並且設定它scaleX（0），保守起見，如果瀏覽器不支持，我們透過visibility: hidden隱藏它。
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottombottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}最後設定動畫時間為0.3s，現在我們只需要設定元素在hover時顯示且scaleX(1)：
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#大功告成！
這樣就完成了一個很有活力的底線動畫。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。
更多CSS3繪製有活力的連結下劃線方法相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn