旋转导航动画

这是我参与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'))
复制代码

❤️ 感谢你们

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

若是你喜欢这篇文章的话，能够「点赞」 + 「收藏」 + 「转发」 给更多朋友。