【前端工具代码】nav5

最新推荐文章于 2023-03-16 09:29:33 发布

南北极之间

最新推荐文章于 2023-03-16 09:29:33 发布

阅读量311

点赞数 1

分类专栏：前端工具代码前端开发

本文链接：https://blog.csdn.net/qq_22182989/article/details/98197689

版权

前端开发同时被 2 个专栏收录

570 篇文章 53 订阅

订阅专栏

前端工具代码

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #2f3542;
        }

        #menu {
            margin: 0;
            padding: 0;
            margin-top: 350px;
        }

        #menu li {
            list-style: none;
            display: inline-block;
        }

        #menu li a {
            text-decoration: none;
            position: relative;
            color: #ff4757;
            font-size: 50px;
            font-weight: 700;
            font-family: sans-serif;
            display: block;
            overflow: hidden;
            transition: 0.7s all;
            padding: 14px 30px;
            text-transform: uppercase;
        }

        #menu li a::before {
            content: '';
            width: 60px;
            position: absolute;
            border-bottom: 8px solid #ff4757;
            bottom: 0;
            right: 350px;
            transition: 0.7s all;
        }

        #menu li a:hover::before {
            right: 0;
        }
    </style>
</head>

<body>
    <ul id="menu">
        <ul>
            <center>
                <li><a href="#">首页</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">新闻</a></li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">关于</a></li>
            </center>
        </ul>
    </ul>
</body>

</html>

效果：