50个前端实战小项目：旋转导航动画

大家好，我是宝哥。今天讲50个前端实战项目之03:旋转导航动画。我会讲项目介绍、实现方法和核心代码，并给出详细HTML、CSS和JavaScript代码。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation前端实战项目系列正在更新：03/5001：可展开卡片02：进度条03

前端开发博客

570人浏览 · 2024-05-02 10:03:17

前端开发博客 · 2024-05-02 10:03:17 发布

大家好，我是宝哥。

今天讲50个前端实战项目之03:旋转导航动画。我会讲项目介绍、实现方法和核心代码，并给出详细HTML、CSS和JavaScript代码。

源码下载地址

https://github.com/bradtraversy/50projects50days/tree/master/rotating-nav-animation

前端实战项目系列正在更新：03/50

01：可展开卡片
02：进度条
03：旋转导航动画

项目介绍

本项目演示了一个炫酷的旋转导航动画效果。点击“汉堡按钮”后，整个内容区会向左旋转一定角度，同时导航栏中的项目依次展开。点击“叉号按钮”可恢复初始状态。

效果预览

在线预览(文末点击原文链接可直达）：

https://qdkfweb.cn/50projects50days/rotating-navigation-animation/

实现方法

该旋转导航动画的效果通过以下步骤实现：

HTML 结构中利用嵌套的容器 (container) 和按钮 (circle) 实现可点击的旋转按钮。
CSS 样式定义按钮和内容区的初始外观，并利用伪类分别控制旋转后的样式。
JavaScript 监听按钮的点击事件，添加或移除容器的 CSS 类 (show-nav)，从而触发内容区和导航栏项目的动画效果。

核心代码

HTML 结构

.container 容器包含内容区和导航栏。
.circle-container 和嵌套的 .circle 元素用于实现旋转的按钮。
#open 和 #close 按钮分别控制导航栏的展开和收起。
<nav> 元素包含导航栏的列表结构。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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" />
    <link rel="stylesheet" href="style.css" />
    <title>Rotating Navigation</title>
  </head>
  <body>
    <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>Florin Pop</small>
        <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="doggy" />
        <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>

    <nav>
      <ul>
        <li><i class="fas fa-home"></i><a href="#"> Home</a></li>
        <li><i class="fas fa-user-alt"></i><a href="#"> About</a></li>
        <li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li>
      </ul>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

CSS 样式

.container 的 transform 属性和 .container.show-nav 伪类控制内容区的旋转效果。
.circle 的 transform 属性和 .container.show-nav .circle 伪类控制按钮的旋转效果。
nav 和 nav ul li 的 transform 属性和相关的伪类控制导航栏项目的渐显动画。

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* {
  box-sizing: border-box;
}

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

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

nav a{
  color: #fafafa;
  text-decoration: none;
  transition: all 0.5s;
}

nav a:hover {
  color: #FF7979;
  font-weight: bold;
}

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

JavaScript 代码

获取按钮和容器的 DOM 元素引用。
“打开”按钮的点击事件处理程序: 为 .container 元素添加 show-nav 类。
“关闭”按钮的点击事件处理程序: 为 .container 元素移除 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'))

结语

通过理解本项目的代码，您学习了如何使用 HTML、CSS 和 JavaScript 结合实现交互式动画效果。您可以根据需要修改本项目的样式和内容，打造个性化的旋转导航交互。

动图全过程展示：

在线预览（点底部原文链接可直达）：https://qdkfweb.cn/50projects50days/rotating-navigation-animation/

最后

如果你觉得宝哥今天的尝试对你有帮助，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

以后我也会多尝试共读其它项目，如果看到喜欢的项目也可以留言告诉我，今天的教程你学会了吗？学会了，就在评论区刷一个，学会了。

欢迎长按图片加好友，宝哥会第一时间和你分享前端行业趋势，面试资源，学习途径等等。

添加好友备注【加群】拉你进技术交流群

公众号：前端开发博客 专注 前端开发技术，分享 前端开发资源和 WEB前沿资讯，如果喜欢我的分享，给宝哥点一个 赞 或者 分享 都是对我的支持

关注公众号后，在首页：

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱
回复「读书」下载成长的相关电子书

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Springboot+MySQL 实现从数据库获取数据展示到前端

1.运行效果效果图如下：2.创建数据库表数据库名为"springboot",数据库表名为"user"，数据库表里面放了5条数据，字段分别为：“id”，“name”，“age”，“email”。3.新建SpringBoot项目1、选择Spring Initial...

腾讯云开发者社区

腾讯云建官网：一个完整的自助建站的过程，不用代码，2小时就可以制作自己的网站

腾讯云开发者社区

金仓数据库KingbaseES用户管理--如何启用/禁用角色

关键字：KingbaseES、数据库、角色、启用/禁用内容正文：1.问题：如何在KingbaseES数据库中启用/禁用角色？2.什么角色的启用/禁用？KingbaseES数据库中启用/禁用角色功能是指在不删除角色的前提下，在本地库内使角色失效,使失效的角色再生效。3.KingbaseES角色的启用/禁用KingbaseES通过插件的方式来启用/禁用角色。这种方式更为灵活，当数据库的实用场景需要该功