CSS 3.0实现创意菜单导航条

越陌度阡

发布于 2020-11-26 10:15:25

1.3K0

发布于 2020-11-26 10:15:25

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

给大家分享一个用CSS 3.0实现创意菜单导航条，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS 3.0实现创意菜单导航条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: '微软雅黑', sans-serif;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #0d0f1b;
            overflow: hidden;
        }

        ul {
            position: relative;
            display: flex;
            flex-direction: column;
        }

        ul li {
            list-style: none;
        }

        ul li::before {
            content: attr(data-text);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 6em;
            font-weight: 700;
            pointer-events: none;
            letter-spacing: 20px;
            opacity: 0;
            transition: 0.5s;
            white-space: nowrap;
        }

        ul li:hover:before {
            opacity: 0.05;
            letter-spacing: 0;
        }

        ul li a {
            position: relative;
            display: inline-block;
            padding: 6px 15px;
            text-decoration: none;
            background: #2196f3;
            color: #fff;
            text-transform: uppercase;
            letter-spacing: 2px;
            overflow: hidden;
            transition: 0.5s;
            z-index: 1;
        }

        ul:hover li a {
            opacity: 0;
        }

        ul li a:hover {
            transform: scale(1.4);
            z-index: 100;
            background: #ff3f81;
            opacity: 1;
        }

        ul li a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100px;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
            transform: skew(35deg);
        }

        ul li a:hover:before {
            left: calc(100% + 100px);
            transition: 0.5s;
            transition-delay: 0.2s;
        }
    </style>
    <link>
</head>

<body>
    <ul>
        <li data-text='Home'><a href="#">首页</a></li>
        <li data-text="About"><a href="#">关于</a></li>
        <li data-text="Services"><a href="#">服务</a></li>
        <li data-text="Portfolio"><a href="#">作品</a></li>
        <li data-text="Team"><a href="#">团队</a></li>
        <li data-text="Contact"><a href="#">联系</a></li>
    </ul>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/05/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

CSS 3.0实现创意菜单导航条

CSS 3.0实现创意菜单导航条

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐