css旋轉(zhuǎn)導航的示例代碼

發(fā)布時間：2023-04-27 17:07:52 作者： codePanda

我要評論

本文主要介紹了css旋轉(zhuǎn)導航的示例代碼，文中通過示例代碼介紹的非常詳細，該導航可用在一些網(wǎng)站首頁導航欄中，需要的朋友們下面隨著小編來一起學習學習吧

前言

今天刷視頻看到一個有趣的css導航菜單，于是乎便拿來一起分享分享，老樣子先看效果圖：

1682067868469 -original-original.gif

接下來讓我們一步步實現(xiàn)它。

頁面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋轉(zhuǎn)菜單</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 菜單部分 -->
    <nav class="menu">
        <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
        <label for="menu-toggler"></label>
        <ul>
            <li class="menu-item">
                <a class="fa-brands fa-facebook" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-twitter" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-instagram" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-github" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-youtube" href="#"></a>
            </li>
            <li class="menu-item">
                <a class="fa-brands fa-tiktok" href="#"></a>
            </li>
        </ul>
    </nav>
</body>
</html>

這里<nav>定義一個導航菜單，<input>定義一個復(fù)選框，用于控制菜單的顯示和隱藏，<label>與復(fù)選框關(guān)聯(lián)，用于觸發(fā)復(fù)選框的選中狀態(tài)，<ul>定義一個無序列表，用于存放菜單項，<li>用于包含一個菜單項， <a>用于鏈接到其他頁面或位置，class="menu"定義了一個 CSS 類，用于對導航菜單進行樣式設(shè)置，class="menu-toggler"用于對復(fù)選框進行樣式設(shè)置，id="menu-toggler"：定義了一個 ID，用于與標簽進行關(guān)聯(lián)，class="menu-item"用于對菜單項進行樣式設(shè)置，同時這里各菜單選項的圖標是采用font-awesome圖標庫的圖標。
寫完頁面結(jié)構(gòu)后，此時頁面：

接下來對各元素進行樣式設(shè)置。

樣式部分

對中心菜單展開選擇元素進行設(shè)置：

body {
    overflow: hidden;
    background: linear-gradient(to right, #55c883, #4fccc4);
}
.menu-toggler {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 40px;
    height: 40px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
}
.menu-toggler + label {
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s, top 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.menu-toggler + label:before, .menu-toggler + label:after {
    width: 40px;
    height: 5px;
    display: block;
    z-index: 1;
    border-radius: 2.5px;
    background: rgba(255, 255, 255, 0.7);
    transition: transform 0.5s, top 0.5s;
    content: "";
    position: absolute;
    left: 0;
}
.menu-toggler + label:before {
    top: 10px;
}
.menu-toggler + label:after {
    top: -10px;
}
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after {
    background: white;
}
.menu-toggler:checked + label {
    background: transparent;
}
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after {
    top: 0;
    width: 40px;
    transform-origin: 50% 50%;
}
.menu-toggler:checked + label:before {
    transform: rotate(45deg);
}
.menu-toggler:checked + label:after {
    transform: rotate(-45deg);
}

overflow: hidden;：將頁面的滾動條隱藏。
background: linear-gradient(to right, #55c883, #4fccc4);：設(shè)置頁面的背景顏色為從左到右漸變的綠色。
對復(fù)選框進行樣式設(shè)置：.menu-toggler。
- position: absolute;：將復(fù)選框設(shè)置為絕對定位，以便進行居中顯示。
- display: block;：將復(fù)選框設(shè)置為塊級元素，以便設(shè)置寬度和高度。
- top: 0; bottom: 0; right: 0; left: 0;：將復(fù)選框的上下左右都設(shè)置為 0，以便進行居中顯示。
- margin: auto;：將復(fù)選框的外邊距設(shè)置為 auto，以便進行水平和垂直居中。
- width: 40px; height: 40px;：設(shè)置復(fù)選框的寬度和高度為 40 像素。
- z-index: 2;：將復(fù)選框的層級設(shè)置為 2，使其顯示在菜單項之上。
- opacity: 0;：將復(fù)選框的透明度設(shè)置為 0，使其不可見。
- cursor: pointer;：將鼠標指針的樣式設(shè)置為手型，以便提示用戶可以進行單擊操作。
.menu-toggler + label：對關(guān)聯(lián)的標簽進行樣式設(shè)置。
- width: 40px; height: 5px;：設(shè)置標簽的寬度為 40 像素，高度為 5 像素。
- display: block;：將標簽設(shè)置為塊級元素，以便設(shè)置寬度和高度。
- z-index: 1;：將標簽的層級設(shè)置為 1，使其顯示在菜單項之下。
- border-radius: 2.5px;：將標簽的邊框半徑設(shè)置為 2.5 像素，以便顯示圓角。
- background: rgba(255, 255, 255, 0.7);：設(shè)置標簽的背景顏色為半透明的白色。
- transition: transform 0.5s, top 0.5s;：設(shè)置標簽的變換過渡效果為 0.5 秒，包括 transform 和 top 屬性。
- position: absolute;：將標簽設(shè)置為絕對定位，以便進行居中顯示。
- top: 0; bottom: 0; right: 0; left: 0;：將標簽的上下左右都設(shè)置為 0，以便進行居中顯示。
- margin: auto;：將標簽的外邊距設(shè)置為 auto，以便進行水平和垂直居中。
.menu-toggler + label:before, .menu-toggler + label:after：對標簽的偽元素進行樣式設(shè)置。
- width: 40px; height: 5px;：設(shè)置偽元素的寬度為 40 像素，高度為 5 像素。
- display: block;：將偽元素設(shè)置為塊級元素，以便設(shè)置寬度和高度。
- z-index: 1;：將偽元素的層級設(shè)置為 1，使其顯示在菜單項之下。
- border-radius: 2.5px;：將偽元素的邊框半徑設(shè)置為 2.5 像素，以便顯示圓角。
- background: rgba(255, 255, 255, 0.7);：設(shè)置偽元素的背景顏色為半透明的白色。
- transition: transform 0.5s, top 0.5s;：設(shè)置偽元素的變換過渡效果為 0.5 秒，包括 transform 和 top 屬性。
- content: "";：將偽元素的內(nèi)容設(shè)置為空。
- position: absolute;：將偽元素設(shè)置為絕對定位，以便進行居中顯示。
- left: 0;：將偽元素的左側(cè)位置設(shè)置為 0。
.menu-toggler + label:before：對標簽的第一個偽元素進行樣式設(shè)置。
- top: 10px;：將偽元素的頂部位置設(shè)置為 10 像素。
.menu-toggler + label:after：對標簽的第二個偽元素進行樣式設(shè)置。
- top: -10px;：將偽元素的頂部位置設(shè)置為 -10 像素。
.menu-toggler:hover + label, .menu-toggler:hover + label:before, .menu-toggler:hover + label:after：對鼠標懸停在復(fù)選框或標簽上時的樣式進行設(shè)置。
- background: white;：將背景顏色設(shè)置為白色。
.menu-toggler:checked + label：對復(fù)選框選中時的標簽樣式進行設(shè)置。
- background: transparent;：將背景顏色設(shè)置為透明。
.menu-toggler:checked + label:before, .menu-toggler:checked + label:after：對復(fù)選框選中時的標簽偽元素進行樣式設(shè)置。
- top: 0;：將偽元素的頂部位置設(shè)置為 0，以便顯示為橫線。
- width: 40px;：將偽元素的寬度設(shè)置為 40 像素，以便顯示為橫線。
- transform-origin: 50% 50%;：將偽元素的變換原點設(shè)置為中心點。
.menu-toggler:checked + label:before：對復(fù)選框選中時的標簽第一個偽元素進行樣式設(shè)置。
- transform: rotate(45deg);：將偽元素順時針旋轉(zhuǎn) 45 度，以便顯示為斜線。
.menu-toggler:checked + label:after：對復(fù)選框選中時的標簽第二個偽元素進行樣式設(shè)置。
- transform: rotate(-45deg);：將偽元素逆時針旋轉(zhuǎn) 45 度，以便顯示為斜線。

以上樣式實現(xiàn)思路為，采用絕對定位對該元素進行定位居于頁面中心，當復(fù)選框未被選中時，利用label及其偽元素實現(xiàn)三條橫線的展示，當選中時，對兩個偽元素分別進行順逆時針的旋轉(zhuǎn)，形成第二張圖的效果，另外當是鼠標懸停時，會對背景顏色在透明與白色之間切換，以上已經(jīng)對于各個屬性及其主要作用進行了解釋。此時效果：

選中時：

接下來對各菜單選項進行樣式設(shè)置：

.menu-toggler:checked ~ ul .menu-item {
    opacity: 1;
}
.menu-toggler:checked ~ ul .menu-item:nth-child(1) {
    transform: rotate(0deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(2) {
    transform: rotate(60deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(3) {
    transform: rotate(120deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(4) {
    transform: rotate(180deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(5) {
    transform: rotate(240deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item:nth-child(6) {
    transform: rotate(300deg) translateX(-110px);
}
.menu-toggler:checked ~ ul .menu-item a {
    pointer-events: auto;
}
.menu-item:nth-child(1) a {
    transform: rotate(0deg);
}
.menu-item:nth-child(2) a {
    transform: rotate(-60deg);
}
.menu-item:nth-child(3) a {
    transform: rotate(-120deg);
}
.menu-item:nth-child(4) a {
    transform: rotate(-180deg);
}
.menu-item:nth-child(5) a {
    transform: rotate(-240deg);
}
.menu-item:nth-child(6) a {
    transform: rotate(-300deg);
}
.menu-item {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 80px;
    height: 80px;
    opacity: 0;
    transition: 0.5s;
}
.menu-item a {
    display: block;
    width: inherit;
    height: inherit;
    line-height: 80px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    font-size: 40px;
    pointer-events: none;
    transition: 0.2s;
}
.menu-item a:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    color: white;
    background: rgba(255, 255, 255, 0.3);
    font-size: 44.44px;
}

以上代碼是對菜單選項進行設(shè)置，初始時，菜單選項opacity: 0;即進行隱藏，當復(fù)選框被選中時，改變透明度的值為opacity: 1;使其展現(xiàn)出來，同時，對所有選項在x軸上進行一定偏移，并且為每個選項設(shè)置單獨的旋轉(zhuǎn)角度，使得選項圍繞中心復(fù)選框，同時由于菜單選項的角度旋轉(zhuǎn)會導致超鏈接的圖標也角度也有偏移，需再對各圖標進行一定角度的旋轉(zhuǎn)，以上樣式主要是旋轉(zhuǎn)，樣式代碼比較容易理解，其中.menu-toggler:checked ~ ul .menu-item是復(fù)合選擇器選中緊接著被選中的.menu-toggler 元素后面的同級 ul 元素中的所有 class 為 .menu-item的元素,transition設(shè)置過渡動畫時長，其余就不過多敘述了。