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

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

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

前言

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

1682067868469 -original-original.gif

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

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

樣式部分

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

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

選中時(shí)：

接下來對各菜單選項(xiàng)進(jìn)行樣式設(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;
}

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