跳动的导航

最新推荐文章于 2024-11-08 17:47:43 发布

我叫长安，你叫故里

最新推荐文章于 2024-11-08 17:47:43 发布

阅读量89

点赞数 1

分类专栏：版块的积累前端文章标签： html css3

本文链接：https://blog.csdn.net/weixin_51297712/article/details/114983360

版权

版块的积累同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

分享一个跳动的导航，喜欢的可以收藏哦！
效果展示：

1615984801766

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跳动的导航</title>
    <link rel="stylesheet" href="css/pubilc.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航 -->
<div class="nav">
    <ul>
        <li>
            <a href="#" target="_blank">
                <span class="website">官网首页</span>
                <span class="home">HOME</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="website">游戏资料</span>
                <span class="home">GAME INFO</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="website">商城合作</span>
                <span class="home">STORE</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="website">用户互动</span>
                <span class="home">COMMUNITY</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="website">赛事中心</span>
                <span class="home">EVENTS</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="website">自助系统</span>
                <span class="home">SYSTEM</span>
            </a>
        </li>
        <li>
            <a href="#" target="_blank">
                <span class="website">个人中心</span>
                <span class="home">USER CENTER</span>
            </a>
        </li>
    </ul>
</div>
<!-- 导航end -->
</body>
</html>

css样式

@charset "utf-8";
.nav{
    width: 1200px;
    height: 76px;
    position: relative;
    background: #000;
    margin-left: auto;
    margin-right: auto;
}
.nav ul{
    display: flex;
    justify-content: space-between;
}
.nav ul a{
    padding-left: 30px;
    padding-right: 30px;
    height:76px;
    line-height:76px ;
    display: block;
    text-align: center;
    overflow: hidden; /*隐藏英文字*/

}
.nav ul a span{
    display: block;
}
.nav ul li a:hover{
    background: #e45717;
}
.nav ul li a .website{
    font-size: 20px;
    color: #fff;
    text-align: center;
    transition: all 0.5s;
}
.nav ul li a .home {
    font-size: 16px;
    color: #6b6a46;
    text-align: center;
}
.nav ul a:hover .website{ /*鼠标移上去让英文字体上移，而中文字隐藏*/
    margin-top: -76px;
}