我们先来看看效果的实现
html代码
<!DOCTYPE html>
<html lang="en">
<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="style.css">
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">归档</a></li>
<li><a href="#">收藏</a></li>
</ul>
</body>
</html>
css代码
*{
padding: 0;
margin: 0;
}
body{
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
ul{
width: 60vw;
display:flex;
justify-content: space-between;
align-items: center;
}
li{
list-style: none;
}
a{
position: relative;
color:#fff;
text-decoration: none;
padding: 6px 18px;
transition: background-color 0.8s;
}
a:hover{
background-color: #cf5829;
}
a::before{
position: absolute;
content: "";
width: 18px;
height: 18px;
border: 2px solid #e74c3c;
border-width: 0 0 2px 2px;
left:0;
bottom:0;
opacity: 0;
transition: 0.2s;
}
a::after{
position: absolute;
content: "";
width: 18px;
height: 18px;
border: 2px solid #e74c3c;
border-width: 2px 2px 0 0 ;
top:0;
right:0;
opacity: 0;
transition: 0.2s;
}
a:hover::before {
left:-12px;
bottom: -12px;
opacity: 1;
}
a:hover::after {
top:-12px;
right: -12px;
opacity: 1;
}
新学到的知识总结
| 标签 |
作用 |
| border-width |
设置四个边框的宽度 |
| space-between |
在弹性盒对象的 div 元素中的各项周围留有空白 |
复习知识
| 标签 |
作用 |
| display: flex |
弹性布局 |
| opacity |
设置元素的不透明级别 |
| transition |
产生过渡效果 |