<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>滑动导航栏</title>
<link href="https://cdn.bootcdn.net/ajax/libs/
font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
/* 弹性布局 让页面元素水平+垂直居中*/
display: grid;
place-items: center;
text-align: center;
/*让页面始终占浏览器总高*/
height: 100vh;
}
.wrapper{
height: 60px;
width: 55vw;
background: #fff;
line-height: 60px;
border-radius: 50px;
box-shadow: 0 15px 10px rgba(0,0,0,0.25);
}
.wrapper nav{
position: relative;
display: flex;
}
.wrapper nav label{
flex: 1;
width: 100%;
z-index:1;
position: relative;
cursor: pointer;
}
.wrapper nav label a{
position: relative;
z-index: -1;
color:#1d1f20;
font-size: 20px;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
}
.wrapper nav label a i{
font-size: 25px;
margin: 0 7px;
}
.wrapper nav .tab{
position: absolute;
height: 100%;
width: 25%;
left: 0;
bottom:0;
background: linear-gradient(45deg,#05abe0 0%,#8200f4);
border-radius: 50px;
transition: 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper nav #home:checked ~ label.home a,
.wrapper nav #inbox:checked ~ label.inbox a,
.wrapper nav #contact:checked ~ label.contact a,
.wrapper nav #heart:checked ~ label.heart a{
color: #fff;
}
.wrapper nav #inbox:checked ~ .tab{
left: 25%;
}
.wrapper nav #contact:checked ~ .tab{
left: 50%;
}
.wrapper nav #heart:checked ~ .tab{
left: 75%;
}
.wrapper nav input{
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<nav>
<input type="radio" name="tab" id="home">
<input type="radio" name="tab" id="inbox">
<input type="radio" name="tab" id="contact">
<input type="radio" name="tab" id="heart">
<label for="home" class="home">
<a href="#">
<i class="fa fa-weibo" aria-hidden="true">微博</i>
</a>
</label>
<label for="inbox" class="inbox">
<a href="#">
<i class="fa fa-qq" aria-hidden="true">QQ</i>
</a>
</label>
<label for="contact" class="contact">
<a href="#">
<i class="fa fa-weixin" aria-hidden="true">微信</i>
</a>
</label>
<label for="heart" class="heart">
<a href="#">
<i class="fa fa-twitter" aria-hidden="true">推特</i>
</a>
</label>
<div class="tab"></div>
</nav>
</div>
</body>
</html>