富有弹性的导航栏标签-酷库博客

富有弹性的导航栏标签效果如下

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="../css/6.css">
        <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        rel="stylesheet">
    </head>
    <body>
        <div class="wrapper">
            <nav>
                <input type="radio" name="tab" id="home" checked>
                <input type="radio" name="tab" id="comment">
                <input type="radio" name="tab" id="envelope">
                <input type="radio" name="tab" id="heart">
                <input type="radio" name="tab" id="user">
                <!-- 注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。 -->
                <label for="home" class="home">
                    <a href="#">
                        <i class="fa fa-home" aria-hidden="true">
                        </i>
                        Home
                    </a>
                </label>
                <label for="comment" class="comment">
                    <a href="#">
                        <i class="fa fa-comment" aria-hidden="true">
                        </i>
                        Comment
                    </a>
                </label>
                <label for="envelope" class="envelope">
                    <a href="#">
                        <i class="fa fa-envelope" aria-hidden="true">
                        </i>
                        Envelope
                    </a>
                </label>
                <label for="heart" class="heart">
                    <a href="#">
                        <i class="fa fa-heart" aria-hidden="true">
                        </i>
                        Heart
                    </a>
                </label>
                <label for="user" class="user">
                    <a href="#">
                        <i class="fa fa-user" aria-hidden="true">
                        </i>
                        User
                    </a>
                </label>
                <div class="tab">
                </div>
            </nav>
        </div>
    </body>

</html>

CSS代码

* {
    margin:0;
    padding:0;
    /* 为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 */ box-sizing:border-box;
}
body {
    /* 设置body高度为100%窗口高度 */ height:100vh;
    /* 弹性盒子布局,水平垂直居中,文字居中 */ display:flex;
    justify-content:center;
    align-items:center;
    /* 属性规定元素中的文本的水平对齐方式。 */ text-align:center;
    background:linear-gradient(200deg,#a8edea,#fed6e3);
}
.wrapper {
    /* 设置宽度为60%窗口高度 */ width:60vw;
    height:60px;
    /* 设置以百分比计的行高： */ line-height:60px;
    background-color:#fff;
    /* 盒子阴影 */ box-shadow:0px 5px 15px rgba(0,0,0,0.25);
    border-radius:50px;
}
.wrapper nav {
    display:flex;
    /* 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 */ position:relative;
}
.wrapper nav label {
    flex:1;
    width:100%;
    position:relative;
    z-index:1;
    /* 鼠标放上变小手 */ cursor:pointer;
}
.wrapper nav label a {
    position:relative;
    z-index:-1;
    color:#333;
    font-size:20px;
    font-weight:500;
    /* 没有文本装饰 */ text-decoration:none;
}
.wrapper nav label a i {
    font-size:25px;
    margin:0px 7px;
}
.wrapper nav input {
    display:none;
}
.wrapper nav .tab {
    position:absolute;
    height:100%;
    width:20%;
    left:0px;
    bottom:0px;
    /* 渐变背景,自左到右 */ background:linear-gradient(to right,#f09819,#ff5858);
    border-radius:50px;
    /* 添加动画过渡.贝塞尔曲线 */ transition:0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper nav #home:checked ~ label.home a,.wrapper nav #comment:checked ~ label.comment a,.wrapper nav #envelope:checked ~ label.envelope a,.wrapper nav #heart:checked ~ label.heart a,.wrapper nav #user:checked ~ label.user a {
    color:#fff;
    /* 这里字体颜色改变需要加个动画过渡 */ transition:0.6s;
}
.wrapper nav #comment:checked ~ .tab {
    left:20%;
}
.wrapper nav #envelope:checked ~ .tab {
    left:40%;
}
.wrapper nav #heart:checked ~ .tab {
    left:60%;
}
.wrapper nav #user:checked ~ .tab {
    left:80%;
}