CSS 3.0實現創意菜單導航條

標簽： CSS

給大家分享一個用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>

本文鏈接：https://blog.csdn.net/weixin_40629244/article/details/106448333

智能推薦

用CSS制作簡單的導航條和簡單的布局框架

導航條和簡單的一個布局試著做一些綜合性的練習，后期做的頁面豐富性會高一點的。導航條在網頁中非常常見的，網頁中的導航器或者導航條一般都是用無序列表制作的，今天我做了一個簡單的導航條和一個簡單的布局框架。感興趣的話可以在我這個代碼上修改，也可以自己去試著寫寫，其實是很簡單的。在這里一般我把CSS代碼和html寫在一起了方便一點。導航條的源代碼一般的導航器或者是導航條都會用無序列表來制作，在...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...

requests實現全自動PPT模板

http://www.1ppt.com/moban/ 可以免費的下載PPT模板，當然如果要人工一個個下，還是挺麻煩的，我們可以利用requests輕松下載訪問這個主頁，我們可以看到下面的樣式點每一個PPT模板的圖片，我們可以進入到詳細的信息頁面，翻到下面，我們可以看到對應的下載地址點擊這個下載的按鈕，我們便可以下載對應的PPT壓縮包那我們就開始做吧首先，查看網頁的源代碼，我們可以看到每一...

CSS 3.0實現創意菜單導航條

智能推薦

猜你喜歡