旋转导航动画

这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

背景

旋转导航动画：是指一开始隐藏导航栏，点击左上角图标后，文章向右旋转 30度 ，然后导航栏成 三角状 显露出来的一种动画效果，这种效果极其小众，基本不会被企业界采纳，但在一些 博客、论坛、个人页 等方面还是有一番作为的。

优点

节约空间
动画新颖缺点
隐藏了用户栏，让用户使用便捷性降低
太花哨，不利于用户把注意力放在文章内容上

最终效果

旋转导航.gif

一、导入 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" />

二、添加 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>

三、添加 CSS 文件

先初始化页面

设置 * 为 box-sizing: border-box
设置 body 来使整个项目居中

* {
    box-sizing: border-box;
}

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

主要的 CSS 代码

核心代码 是设置一个 圆形轮盘按钮，用于 开关 旋转操作
通过 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;
}

四、添加 JS 文件

主要逻辑

通过document.getElementById('open')，获取 ID名 为 open 的节点
通过document.getElementById('close')，获取 ID名 为 close 的节点
通过document.querySelector('.container')，获取 类名 为 container 的节点
通过open.addEventListener('click', () => container.classList.add('show-nav'))，帮 open 的节点绑定一个 点击事件 ，点击后为 ID名 为 open 的节点添加一个 show-nav 的类名
通过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'))

❤️ 感谢大家

如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。

如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」给更多朋友。