ejercicios de navegación CSS
resultados de operación son los siguientes:
index.html como sigue:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/font-awesome.min.css">
<title>css导航</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
color:#333;
text-decoration: none;
}
body {
background-color: #bfbfbf;
}
.menu {
width: 700px;
height: 140px;
background-color: white;
margin: 50px auto 0;
}
.menu li{
position: relative;
width: 20%;
height: 100%;
float: left;
text-align: center;
border-right: 1px solid gray;
box-sizing: border-box;
}
.menu li:last-child {
border: none;
}
.menu li a {
display: block;
height: 100%;
}
.menu li a i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-30%,30%);
font-size: 20px;
color: #bfbfbf;
transition: all .2s linear .2;
}
.menu li a i::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: 1px solid #bfbfbf;
width: 41px;
height: 41px;
border-radius: 50%;
transition: transform .2s linear 0s,border-color .2s linear;
}
.menu li a span {
position: absolute;
font-size: 14px;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
.menu li:hover {
background: yellow;
border: yellow;
}
.menu li:hover a i::after {
transform: translate(-50%,-50%) scale(1.5);
border-color: transparent;
}
.menu li:hover a span {
opacity: 0;
}
.menu li:hover a i{
font-size: 44px;
color: #565a60;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>首页</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-lightbulb-o"></i>
<span>特点</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-pencil fa-fw"></i>
<span>编辑</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-comment-o"></i>
<span>博客</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-envelope-o fa-fw"></i>
<span>邮箱</span>
</a>
</li>
</ul>
</body>
</html>
