使用CSS3动画写的导航栏

CSS3动画导航栏

细节地方：
1.对二级标题ul上加显示和隐藏的效果，不要对二级标题ul中的li加效果
2.给二级标题了ul加上绝对定位，再设置z-index。因为加了定位后会脱离标准流，产生了z轴，标准流中不存在z轴，所以z-index优先级就不会生效。加绝对定位而不是相对定位是由于加相对定位有的区域会出现hover空白区域会显示二级标题，这是用css3写导航栏遇到的很大问题，具体原因我还没弄清，使用绝对定位就解决了这一问题。其它详细介绍代码中有标注。
3.visibility:hidden属性制造隐藏效果，盒子本身还是会占有位置。display:none就不会占有位置，但后者不能用css写出动画。

<!-- header开始 -->
<header id="header" class="header">
    <div class="top">
        <div class="top-logo">
            <a href="index.html"><img src="images/logo.png" alt="logo"></a>
        </div>
        <!-- nav导航 -->
        <div class="top-nav">
            <ul class="nav-ul">
                <li>
                    <a class="first-a" href="index.html">首页</a>
                </li>
                <li>
                    <a href="forum.html">交流论坛</a>
                    <ul class="nav-select">
                        <li><a href="forum.html">精选</a></li>
                        <li><a href="forum.html">涂鸦</a></li>
                        <li><a href="forum.html">漫画</a></li>
                        <li><a href="forum.html">手绘</a></li>
                        <li><a href="forum.html">同人</a></li>
                        <li><a href="forum.html">插画</a></li>
                        <li><a href="forum.html">其它</a></li>
                    </ul>
                </li>
                <li>
                    <a href="product_list.html">画册售卖</a>
                    <ul class="nav-select">
                        <li><a href="product_list.html">精选</a></li>
                        <li><a href="product_list.html">涂鸦</a></li>
                        <li><a href="product_list.html">漫画</a></li>
                        <li><a href="product_list.html">手绘</a></li>
                        <li><a href="product_list.html">同人</a></li>
                        <li><a href="product_list.html">插画</a></li>
                        <li><a href="product_list.html">其它</a></li>
                    </ul>
                </li>
                <li>
                    <a href="create.html">在线约稿</a>
                    <ul class="nav-select">
                        <li><a href="create.html">企划</a></li>
                        <li><a href="create.html">创作</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="top-service">
            <div class="icon-user-box">
                <ul class="service-ul">
                    <li>
                        <a href="user.html">
                            <div class="pic"><img src="images/mmexport1596082899160.jpg" alt="头像"></div>
                        </a>
                        <ul class="service-select">
                            <li><a href="user.html">账户信息</a></li>
                            <li><a href="#">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <!-- 购物袋 -->
            <div class="icon-trolley-box">
                <a href="shopping_trolley.html">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-shopping-bag">
                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <path d="M16 10a4 4 0 0 1-8 0"></path>
                    </svg>
                </a>
            </div>
            <!-- 搜索按钮 -->
            <div class="search-box">
                <input type="text" placeholder="请输入关键词">
                <div class="icon-search-box">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-search">
                        <circle cx="11" cy="11" r="8"></circle>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                    </svg>
                </div>
            </div>
        </div>
    </div>

</header>
<!-- header结束 -->

/* 字体颜色渐变动画 */

@keyframes color-gradual {
    0% {
        color: #000000;
    }
    100% {
        color: #486fb4;
    }
}

/* header样式 */

.header {
    width: 100%;
    background-color: #486fb4;
}

.top {
    width: 1300px;
    height: 80px;
    margin: 0 auto;
}

/* logo */

.top-logo {
    display: inline-block;
    float: left;
    width: 80px;
    height: 80px;
    margin-left: 50px;
}

.top-logo img {
    width: 80px;
    height: 80px;
}

/* 中间导航 */

.top-nav {
    display: inline-block;
    float: left;
    width: 480px;
    height: 80px;
    margin-left: 200px;
}

.nav-ul>li {
    float: left;
    width: 67px;
    height: 80px;
    margin-left: 50px;
}

.nav-ul>li>a {
    display: block;
    font-size: 16px;
    color: white;
    font-weight: 600;
    line-height: 80px;
    text-align: center;
}

.first-a {
    padding-left: 30px;
}

.nav-select li a {
    display: block;
    color: #212529;
    font-size: 14px;
    font-weight: bold;
    line-height: 50px;
    margin-left: 25px;
}

.nav-select li a:hover {
    animation: color-gradual .5s;
    animation-fill-mode: forwards;
}

.nav-select li, .service-ul li ul li {
    position: relative;
    /* visibility: hidden; */
    float: initial;
    width: 200px;
    height: 52px;
    border-bottom: 1px solid #f1f1f1;
    background-color: #ffffff;
    /* transform: translateY(40px);
    transition: all 500ms ease;
    opacity: 0; */
}

/* 
    如果使用下面注释内的这种方法，在li标签上做隐藏和hover显示的操作，
    会出现在鼠标hover隐藏li的空白处会显示出li标签，因为visibility:hover
    隐藏后仍然占有位置。而display显示和隐藏的方法又不能简单地添加动画。
    该方式就达不到我们想hover一级标题时显示二级标题的效果。
    而我们在ul上做显示隐藏就可以实现
    .nav-ul>li:hover .nav-select li {
    visibility: visible;
    transform: translateY(5px);
    opacity: 1;
} */


.nav-ul li .nav-select, .service-ul li .service-select {
    /* 加了定位优先级才能生效
        因为定位脱离了标准流，有了z轴，
        标准流没有z轴，就不存在谁盖住谁.
        而且最好用绝对定位，用相对定位后，
        下面头像区域的hover会出现上面提到
        的hover空白处也会显示li的情况
    */
    position: absolute;
    z-index: 9999;
    visibility: hidden;
    transform: translateY(40px);
    transition: all 500ms ease;
    opacity: 0;
}

.nav-ul li:hover>.nav-select {
    visibility: visible;
    transform: translateY(5px);
    opacity: 1;
}

/* 导航条右边搜索、购物袋、头像样式 */

.top-service {
    float: right;
    width: 400px;
    height: 80px;
    margin-right: 50px;
}

/* 头像 */

.icon-user-box {
    float: right;
    width: 50px;
    height: 80px;
}

.pic {
    overflow: hidden;
    width: 50px;
    height: 50px;
    margin-top: 15px;
    border-radius: 50%;
}

.pic img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}


/* 
    该内容已经写到上面的并集选择器中
    .service-ul li .service-select {
    position: absolute;
    z-index: 9999;
    visibility: hidden;
    transform: translateY(40px);
    transition: all 500ms ease;
    opacity: 0;
} */

.service-ul li:hover > .service-select {
    visibility: visible;
    transform: translateY(20px);
    opacity: 1;
}

.service-select li a {
    display: block;
    color: #212529;
    font-size: 14px;
    font-weight: bold;
    line-height: 50px;
    margin-left: 25px;
}

.nav-select li a:hover {
    animation: color-gradual .5s;
    animation-fill-mode: forwards;
}

.service-select li a:hover {
    animation: color-gradual .5s;
    animation-fill-mode: forwards;
}

/* 购物袋 */

.icon-trolley-box {
    float: right;
    width: 30px;
    margin-top: 28px;
    margin-right: 25px;
    margin-left: 25px;
}

.icon-trolley-box svg {
    color: white;
}

/* 搜索 */

.search-box {
    float: right;
    height: 40px;
    margin-top: 20px;
    margin-left: 20px;
    border-radius: 5px;
    background-color: #fff;
}

.search-box input {
    display: inline-block;
    border: none;
    outline: none;
    line-height: 40px;
    background: none;
    border-radius: 5px;
    padding-left: 6px;
    width: 0px;
    transition: all .4s ease;
}

.search-box input:focus {
    outline: none;
}

.search-box:hover>input {
    width: 200px;
}

/* 搜索按钮 */

.icon-search-box {
    position: relative;
    z-index: 9999;
    float: right;
    width: 30px;
    padding-top: 7px;
}

.icon-search-box svg {
    cursor: pointer;
    color: #486fb4;
}