<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating nav 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" />
<!-- 这个特定的样式表是由Font Awesome图标库提供的，版本号为5.14.0。Font Awesome是一个非常受欢迎的图标集合，它包含了各种各样的矢量图标 -->
<link rel="stylesheet" href="style.css">
</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>
<!-- 导航区域 -->
<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>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
day03-Rotating nav animation（旋转导航动画）
需积分: 0 38 浏览量
2023-06-30
21:20:08
上传
评论
收藏 4KB RAR 举报
day03-Rotating nav animation（旋转导航动画）.rar （3个子文件） 
day03-Rotating nav animation（旋转导航动画） 
style.css 3KB
index.html 4KB script.js 464B资源评论
