欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

image.png

接下來對各元素進行樣式設置。

樣式部分

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

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);：設置頁面的背景顏色為從左到右漸變的綠色。

  • 對復選框進行樣式設置：.menu-toggler。

    • position: absolute;：將復選框設置為絕對定位，以便進行居中顯示。
    • display: block;：將復選框設置為塊級元素，以便設置寬度和高度。
    • top: 0; bottom: 0; right: 0; left: 0;：將復選框的上下左右都設置為 0，以便進行居中顯示。
    • margin: auto;：將復選框的外邊距設置為 auto，以便進行水平和垂直居中。
    • width: 40px; height: 40px;：設置復選框的寬度和高度為 40 像素。
    • z-index: 2;：將復選框的層級設置為 2，使其顯示在菜單項之上。
    • opacity: 0;：將復選框的透明度設置為 0，使其不可見。
    • cursor: pointer;：將鼠標指針的樣式設置為手型，以便提示用戶可以進行單擊操作。

  • .menu-toggler + label：對關聯(lián)的標簽進行樣式設置。

    • width: 40px; height: 5px;：設置標簽的寬度為 40 像素，高度為 5 像素。
    • display: block;：將標簽設置為塊級元素，以便設置寬度和高度。
    • z-index: 1;：將標簽的層級設置為 1，使其顯示在菜單項之下。
    • border-radius: 2.5px;：將標簽的邊框半徑設置為 2.5 像素，以便顯示圓角。
    • background: rgba(255, 255, 255, 0.7);：設置標簽的背景顏色為半透明的白色。
    • transition: transform 0.5s, top 0.5s;：設置標簽的變換過渡效果為 0.5 秒，包括 transform 和 top 屬性。
    • position: absolute;：將標簽設置為絕對定位，以便進行居中顯示。
    • top: 0; bottom: 0; right: 0; left: 0;：將標簽的上下左右都設置為 0，以便進行居中顯示。
    • margin: auto;：將標簽的外邊距設置為 auto，以便進行水平和垂直居中。

  • .menu-toggler + label:before, .menu-toggler + label:after：對標簽的偽元素進行樣式設置。

    • width: 40px; height: 5px;：設置偽元素的寬度為 40 像素，高度為 5 像素。
    • display: block;：將偽元素設置為塊級元素，以便設置寬度和高度。
    • z-index: 1;：將偽元素的層級設置為 1，使其顯示在菜單項之下。
    • border-radius: 2.5px;：將偽元素的邊框半徑設置為 2.5 像素，以便顯示圓角。
    • background: rgba(255, 255, 255, 0.7);：設置偽元素的背景顏色為半透明的白色。
    • transition: transform 0.5s, top 0.5s;：設置偽元素的變換過渡效果為 0.5 秒，包括 transform 和 top 屬性。
    • content: "";：將偽元素的內(nèi)容設置為空。
    • position: absolute;：將偽元素設置為絕對定位，以便進行居中顯示。
    • left: 0;：將偽元素的左側(cè)位置設置為 0。

  • .menu-toggler + label:before：對標簽的第一個偽元素進行樣式設置。

    • top: 10px;：將偽元素的頂部位置設置為 10 像素。

  • .menu-toggler + label:after：對標簽的第二個偽元素進行樣式設置。

    • top: -10px;：將偽元素的頂部位置設置為 -10 像素。

  • .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;：將偽元素的頂部位置設置為 0，以便顯示為橫線。
    • width: 40px;：將偽元素的寬度設置為 40 像素，以便顯示為橫線。
    • transform-origin: 50% 50%;：將偽元素的變換原點設置為中心點。

  • .menu-toggler:checked + label:before：對復選框選中時的標簽第一個偽元素進行樣式設置。

    • transform: rotate(45deg);：將偽元素順時針旋轉(zhuǎn) 45 度，以便顯示為斜線。

  • .menu-toggler:checked + label:after：對復選框選中時的標簽第二個偽元素進行樣式設置。

    • transform: rotate(-45deg);：將偽元素逆時針旋轉(zhuǎn) 45 度，以便顯示為斜線。

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

image.png

選中時：

image.png

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

.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;
}

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

結(jié)語

到此這篇關于css旋轉(zhuǎn)導航的示例代碼的文章就介紹到這了,更多相關css旋轉(zhuǎn)導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • CSS+HTML 實現(xiàn)頂部導航欄功能

    這篇文章主要介紹了CSS+HTML 實現(xiàn)頂部導航欄功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-08-24

  • 教你做個可愛的css滑動導航條

    今天來帶大家做一個可愛的滑動導航欄效果，這個demo很基礎，但是使用場景非常廣泛，感興趣的小伙伴們可以參考一下
    2021-06-15

  • CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)

    這篇文章主要介紹了CSS實現(xiàn)移動端橫向滾動導航條(PC端也適用)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2021-03-17

  • CSS 帶搜索導航欄的示例代碼

    這篇文章主要介紹了CSS 帶搜索導航欄的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2021-02-22

  • 不可思議的CSS導航欄下劃線跟隨效果

    這篇文章主要介紹了純CSS實現(xiàn)導航欄下劃線跟隨效果，本文圖文并茂實例代碼詳解，給大家介紹的非常詳細，需要的朋友參考下吧
    2019-12-09

  • css實現(xiàn)流程導航效果(三種方法)

    本文通過三種方法給大家介紹css實現(xiàn)流程導航效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下
    2019-11-13

  • html+css 實現(xiàn)簡易導航欄功能

    這篇文章主要介紹了基于html+css 實現(xiàn)簡易導航欄功能，主要就是css（級聯(lián)樣式表）對html的內(nèi)容做格式化。具體內(nèi)容詳情大家跟隨小編一起通過本文學習吧
    2021-04-07

  • css實現(xiàn)導航切換的實例代碼

    本文通過實例代碼給大家介紹了css實現(xiàn)導航切換效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
    2018-08-15

  • css實現(xiàn)電梯導航的項目實踐

    CSS梯形導航圖是一種使用 CSS 布局實現(xiàn)的導航設計,可以根據(jù)需要靈活調(diào)整導航菜單的上下位置和大小，本文主要介紹了css實現(xiàn)電梯導航，具有一定的參考價值，感興趣的可以了解
    2023-05-06

最新評論