50天50个前端小项目（纯html+css+js）第三天（花里胡哨旋转导航）

本文链接：https://blog.csdn.net/qq_45628733/article/details/127344554

本文介绍了如何创建一个花哨的旋转导航，适用于个人博客装饰。通过HTML、CSS和JavaScript实现，虽然实用性有限，但作为练习很有价值。包含代码展示和实际效果演示。

摘要由CSDN通过智能技术生成

今天要实现的一个小demo个人感觉花里胡哨（bushi），但是确实没大卵用，主要功能就是花里胡哨，可以用于自己的个人博客这种地方，开发应该是用不到的。
话不多说，先看效果图：
乍一看没什么特别的在这里插入图片描述
然后点击左上角后

怎么样，花里胡哨（100分），实用性（你自己品）
上代码了直接：
html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- cdn图标库，本项目的图标就从这里引入 -->
    <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>