旋轉導航動畫

這是我參與8月更文挑戰的第12天，活動詳情查看：8月更文挑戰

做者：battleKing
倉庫：Github、CodePen
博客：CSDN、掘金
反饋郵箱：myh19970701@foxmail.com
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權

背景

旋轉導航動畫：是指一開始隱藏導航欄，點擊左上角圖標後，文章向右旋轉 30度 ，而後導航欄成 三角狀 顯露出來的一種動畫效果，這種效果極其小衆，基本不會被企業界採納，但在一些 博客、論壇、我的頁 等方面仍是有一番做爲的。

優勢

1. 節約空間
2. 動畫新穎

缺點

1. 隱藏了用戶欄，讓用戶使用便捷性下降
2. 太花哨，不利於用戶把注意力放在文章內容上

最終效果

1、導入 font-awesome 圖標庫

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
複製代碼

2、添加 HTML 文件

<div class="container">
    <div class="circle-container">
        <div class="circle">
            <button id="close">
                <i class="fas fa-times"></i>
            </button>
            <button id="open">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </div>

    <div class="content">
        <h1>Amazing Article</h1>
        <small>Wikipedia</small>
        <p>The giant panda,also known as the panda, is a bear native to South Central China.The giant panda lives in
            a few mountain ranges in central China, mainly in Sichuan, but also in neighbouring Shaanxi and Gansu.
            It is characterised by its bold black-and-white coat and rotund body. The name "giant panda" is
            sometimes used to distinguish it from the red panda, a neighboring musteloid. Though it belongs to the
            order Carnivora, the giant panda is a folivore, with bamboo shoots and leaves making up more than 99% of
            its diet. Giant pandas in the wild will occasionally eat other grasses, wild tubers, or even meat in the
            form of birds, rodents, or carrion. In captivity, they may receive honey, eggs, fish, yams, shrub
            leaves, oranges, or bananas.</p>

        <h3>Giant panda</h3>
        <img src="https://cdn.pixabay.com/photo/2019/09/08/19/54/panda-4461766_960_720.jpg" alt="panda" />
        <p>While the dragon has often served as China's national symbol, internationally the giant panda has often
            filled this role. As such, it is becoming widely used within China in international contexts, for
            example, appearing since 1982 on gold panda bullion coins and as one of the five Fuwa mascots of the
            Beijing Olympics.In July 2021, Chinese authorities also reclassified the giant panda as vulnerable
            rather than endangered.</p>
    </div>
</div>

<nav>
    <ul>
        <li><i class="fas fa-home"></i> Home</li>
        <li><i class="fas fa-user"></i> About</li>
        <li><i class="fas fa-envelope"></i> Contact</li>
    </ul>
</nav>
複製代碼

3、添加 CSS 文件

先初始化頁面

1. 設置 * 爲 box-sizing: border-box
2. 設置 body 來使整個項目居中

* {
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: #333;
    color: #222;
    overflow-x: hidden;
    margin: 0;
}
複製代碼

主要的 CSS 代碼

1. 核心代碼 是設置一個 圓形輪盤按鈕，用於 開關 旋轉操做
2. 經過 transform: rotate(); 來達到旋轉操做

.container {
    background-color: #fafafa;
    transform-origin: top left;
    transition: transform 0.5s linear;
    width: 100vw;
    min-height: 100vh;
    padding: 50px;
}

.container.show-nav {
    transform: rotate(-20deg);
}

.circle-container {
    position: fixed;
    top: -100px;
    left: -100px;
}

.circle {
    background-color: #ff7979;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    position: relative;
    transition: transform 0.5s linear;
}

.container.show-nav .circle {
    transform: rotate(-70deg);
}

.circle button {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    background: transparent;
    border: 0;
    font-size: 26px;
    color: #fff;
}

.circle button:focus {
    outline: none;
}

.circle button#open {
    left: 60%;
}

.circle button#close {
    top: 60%;
    transform: rotate(90deg);
    transform-origin: top left;
}

.container.show-nav+nav li {
    transform: translateX(0);
    transition-delay: 0.3s;
}

nav {
    position: fixed;
    bottom: 40px;
    left: 0;
    z-index: 100;
}

nav ul {
    list-style-type: none;
    padding-left: 30px;
}

nav ul li {
    text-transform: uppercase;
    color: #fff;
    margin: 40px 0;
    transform: translateX(-100%);
    transition: transform 0.4s ease-in;
}

nav ul li i {
    font-size: 20px;
    margin-right: 10px;
}

nav ul li+li {
    margin-left: 15px;
    transform: translateX(-150%);
}

nav ul li+li+li {
    margin-left: 30px;
    transform: translateX(-200%);
}

.content img {
    max-width: 100%;
}

.content {
    max-width: 1000px;
    margin: 50px auto;
}

.content h1 {
    margin: 0;
}

.content small {
    color: #555;
    font-style: italic;
}

.content p {
    color: #333;
    line-height: 1.5;
}
複製代碼

4、添加 JS 文件

主要邏輯

1. 經過document.getElementById('open')，獲取 ID名 爲 open 的節點
2. 經過document.getElementById('close')，獲取 ID名 爲 close 的節點
3. 經過document.querySelector('.container')，獲取 類名 爲 container 的節點
4. 經過open.addEventListener('click', () => container.classList.add('show-nav'))，幫 open 的節點綁定一個 點擊事件 ，點擊後爲 ID名 爲 open 的節點添加一個 show-nav 的類名
5. 經過close.addEventListener('click', () => container.classList.remove('show-nav'))，幫 close 的節點綁定一個 點擊事件 ，點擊後爲 ID名 爲 open 的節點移除一個 show-nav 的類名

const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')

open.addEventListener('click', () => container.classList.add('show-nav'))

close.addEventListener('click', () => container.classList.remove('show-nav'))
複製代碼

❤️ 感謝你們

若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。

若是你喜歡這篇文章的話，能夠「點贊」 + 「收藏」 + 「轉發」 給更多朋友。