DAY3-旋转导航动画 - 卑微幻想家's Blog

前言

这个项目来源于GitHub上的一个开源项目https://github.com/bradtraversy/50projects50days，总共有50个用来练手的前端项目，我学习然后复现效果，并记录学习笔记和心得。

效果展示

这个案例是通过点击左上角的按钮，旋转整个页面，按钮本身也会旋转，旋转过后，从侧边出现导航栏的效果。

代码实现

HTML&CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotating-navigation-animation</title>
    <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" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

        * {
            padding: 0;
            margin: 0;
        }

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

        .container {
            padding: 120px 0 50px 0;
            background-color: #fafafa;
            margin: 0 auto;
            transform-origin: top left;
            transition: transform 0.5s linear;
        }

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

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

        .author {
            font-size: 14px;
            color: #9f626a;
            font-style: italic;
        }

        p {
            margin: 15px 0;
            line-height: 1.5;
            color: #333;
        }

        .container h3 {
            margin-bottom: 15px;
        }

        .rotating{
            width: 200px;
            height: 200px;
            background-color: #ff7979;
            border-radius: 50%;
            position: absolute;
            top: -100px;
            left: -100px;
            transition: transform 0.5s linear;
        }

        .rotating button{
            background: transparent;
            font-size: 26px;
            color: #fff;
            border: none;
        }

        .rotating button#open{
            position: absolute;
            left: 130px;
            top: 130px;
        }

        .rotating button#close{
            position: absolute;
            left: 41px;
            top: 132px;
            transform: rotate(90deg);
        }

        nav{
            position: fixed;
            color: white;
            bottom: 0;
        }

        nav ul{
            padding: 30px;
            list-style: none;
            text-transform: uppercase;
        }

        nav ul li {
            margin: 40px 0;
            font-size: 18px;
            line-height: 30px;
            transform: translateX(-100%);
            transition: transform 0.4s ease-in;
        }

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

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


        nav.show-nav ul li {
            transform: translateX(0);
            transition-delay: 0.3s;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <h1>Amazing Article</h1>
        <span class="author">Florin Pop</span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime
            aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores
            recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime
            dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem,
            molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae
            temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur
            perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo
            ipsa.</p>
        <h3>My Dog</h3>
        <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
             alt="">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur
            culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat
            molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet
            temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque
            fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>
    </div>
</div>
<div class="rotating">
    <button id="close"><i class="fas fa-times"></i></button>
    <button id="open"><i class="fas fa-bars"></i></button>
</div>

<nav>
    <ul>
        <li><i class="fas fa-home"></i> Home</li>
        <li><i class="fas fa-user-alt"></i> About</li>
        <li><i class="fas fa-envelope"></i> Contact</li>
    </ul>
</nav>

本项目引入了外部的字体，以及图标样式

JS

let close = document.querySelector("#close");
let open = document.querySelector("#open");
let rotating = document.querySelector(".rotating");
let container = document.querySelector(".container");
let nav = document.querySelector("nav");
close.onclick = () =>{
    rotating.style.transform = 'rotate(0deg)';
    container.style.transform = 'rotate(0deg)';
    nav.classList.remove("show-nav")
}

open.onclick = () =>{
    rotating.style.transform = 'rotate(-90deg)';
    container.style.transform = 'rotate(-20deg)';
    nav.classList.add("show-nav")
}

技术要点

在旋转.container时，为达到围绕着右上角的旋转的效果应该加上transform-origin: top left
overflow-x: hidden也很重要，不然旋转后会出现横向的滚动条
当元素设置为position: fixed，但是父元素有transform属性时，该元素会变为相对定位。这里可以参考position: fixed定位失效原因及解决方案 - 知乎 (zhihu.com)

总结

我在实现效果的过程中，是用js修改style来实现的，但是看到作者采用的添加css.show-nav类名的方法进行实现，只需要添加一个类名，其余和这个类名变化相关的，都通过css选择器进行设定样式，这是值得我进行学习的。
该项目中运用到了很多选择器的优先级方面的知识。
旋转盒子中的按钮定位问题，我是直接利用的绝对定位在控制台调整的，作者的实现方式很有技巧性。
给子元素设置margin-top时，我发现会也会作用于父盒子，连同父盒子一起下移。这里可以参考这篇文章给子盒子加margin-top会把父盒子带下来，造成外边距塌陷的解决办法

DAY3-旋转导航动画

https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/day3-rotating-navigation-animation

作者

卑微幻想家

发布于

2022-10-13

许可协议