今天要实现的一个小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>
<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部分：一点点分析不现实，但是代码注释写的足够详细，有需要的大家copy下来细品就行。主要就是动画以及那个转动角度有点麻烦，不过细细想想也不难。
*{
box-sizing: border-box;
}
body{
background-color: #333;
color: #222;
/* 隐藏掉x轴上的滚动条 */
overflow-x: hidden;
margin: 0;
}
.container{
background-color: #fafafa;
/* 设置旋转点为左上角 */
transform-origin: top left;
/* 添加过渡动画属性 */
transition: transform 0.5s linear;
/* 设置视口宽高为100 */
/* 在css中vw与vh的区别：vw单位可以根据窗口的宽度自动改变大小，“1vw”是窗口宽度的“1%”；vh单位可以根据窗口的高度自动改变大小，“1vh”是窗口高度的“1%”。 */
width: 100vw;
min-height: 100vh;
/* 内边距往里面缩50px */
padding: 50px;
}
.container.show-nav{
/* 页面逆时针旋转20度 */
transform: rotate(-20deg);
}
/* 固定半圆位置，设置top和left使其只露出四分之一个正方形，因为如下正方形设置为200*200的大小 */
.circle-container {
/* 固定在一个位置 */
position: fixed;
top: -100px;
left: -100px;
}
/* 半圆 */
.circle{
background-color: #ff7979;
height: 200px;
width: 200px;
/* 从这一步之上左上角还是个正方形，设置border-radius为50%之后变成半圆 */
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
/* 当左上角按钮被点击的时候把按钮图标换成关闭按钮X，直接旋转70度即可 */
.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 */
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;
text-decoration: none;
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{
/* 设置第二个相比第一个往右移动了15px */
margin-left: 15px;
transform: translateX(-150%);
}
nav ul li + li + li{
/* 设置第三个相比第一个往右移动了30px */
margin-left: 30px;
transform: translateX(-200%);
}
/* 去掉a标签自带的下划线并且上色 */
nav a{
color: #fafafa;
text-decoration: none;
transition: all 0.5s;
}
/* 鼠标覆盖上去字体会加粗变红 */
nav a:hover {
color: #FF7979;
font-weight: bold;
}
/* 设置一下图片,因为图片过大，所以让它占内容区域的100%以达到全部显示的效果 */
.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;
}
之后就是js部分啦：这部分不是很多，主要就是对按钮上show-nav这个类的增加和去除
const open = document.getElementById('open')
const close = document.getElementById('close')
const container = document.querySelector('.container')
// 增加或者删除show-nav的class类
open.addEventListener('click', ()=>{
container.classList.add('show-nav')
})
close.addEventListener('click', ()=>{
container.classList.remove('show-nav')
})
第三天的小demo就是这样啦，大家可以自己复制下来运行下玩玩，当作一个练习还是不错的。
戳我到项目gitee地址
本文含有隐藏内容，请 开通VIP 后查看