css3實現下劃線動畫效果
阿新 • • 發佈：2019-01-25
效果
製作gif的時候有卡頓
方法
通過css3的transform和transition屬性來實現
程式碼
- 下劃線從左到右效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下劃線動畫</title>
<style>
/*先把a的原有下劃線樣式給清除*/
a,a:link,a:visited,a:focus{
text-decoration:none;color - 下劃線從右到左效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下劃線動畫</title>
<style>
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.right-to-left{
position:relative;
}
.right-to-left::after{
content:'';
display:block;
width:0;
height:3px;
position:absolute;
right:0; /*區別就是開始時在右邊*/
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
}
.right-to-left:hover::after{
width:100%;
}
</style>
</head>
<body>
<a href="#" class="right-to-left">滑鼠經過從右向左延伸的下劃線</a>
</body>
</html>- 下劃線從中間向兩端延伸效果
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>下劃線動畫</title>
<style>
a,a:link,a:visited,a:focus{
text-decoration:none;color:#000;
}
.center-to-head{
position:relative;
}
.center-to-head::after{
content:'';
display:block;
/*開始時候下劃線的寬度為100%*/
width:100%;
height:3px;
position:absolute;
bottom:-10px;
background:#000;
transition:all 0.3s ease-in-out;
/*通過transform的縮放scale來讓初始時x軸為0*/
transform: scale3d(0,1,1);
/*將座標原點移到元素的中間，以原點為中心進行縮放*/
transform-origin:50% 0;
}
.center-to-head:hover::after{
/*滑鼠經過時還原到正常比例*/
transform:scale3d(1,1,1);
}
</style>
</head>
<body>
<a href="#" class="center-to-head">滑鼠經過從中間向兩端延伸的下劃線</a>
</body>
</html>