提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

【前端工具代码】nav5

工具前端代码
2023-09-14 09:04:08 时间

 

<!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>

效果：


相关文章