skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第199个小实例：不一样的超链接下划线

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2023-01-01 17:25:20 +08:00
parent 846eb142ae
commit 49e7106255
3 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -206,6 +206,7 @@
196. HTML5+CSS3小实例：纯CSS实现锚点平滑过渡
197. HTML5+CSS3+Vue小实例：彩带圣诞树
198. HTML5+CSS3+JS小实例：网页手电筒
199. HTML5+CSS3小实例：不一样的超链接下划线
#### 赞赏作者
![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)

41
code/199/199.css Normal file
View File

@ -0,0 +1,41 @@
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #f7f7ff;
}
a{
margin: 10px;
text-decoration: none;
color: #3e7ac5;
position: relative;
}
/* 下划线（左进右出） */
a::after{
content: '';
width: 100%;
height: 1px;
/* currentColor可以获取当前元素或父元素的color */
background-color: currentColor;
position: absolute;
left: 0;
bottom: 0;
/* 沿x轴缩放至隐藏 */
transform: scaleX(0);
/* 设置变换圆点为右 */
transform-origin: right;
/* 设置变换时的过渡 */
transition: transform 0.3s ease-out;
}
a:hover::after{
/* 沿x轴缩放至显示 */
transform: scaleX(1);
/* 设置变换圆点为左 */
transform-origin: left;
}

17
code/199/199.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不一样的超链接下划线</title>
<link rel="stylesheet" href="199.css">
</head>
<body>
<a href="">点赞</a>
<a href="">关注</a>
<a href="">收藏</a>
<a href="">转发</a>
<a href="">要不，一键三连</a>
</body>
</html>