Rotating Navigation

需求

制作旋转导航，点击按钮内容旋转显示导航栏，再次点击返回

示例图

分析

正文内容正常展示，底部导航栏添加定位脱离文档流，再将其移动到屏幕左侧，对单个子项设定样式呈现阶梯状。

当点击的时候为导航栏添加类名，将其移动到原来的位置并设置淡入淡出效果以及延时

正文内容也会偏移一定的角度，同时按钮盘进行旋转

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!--
 * @Author: CQJ
 * @Date: 2022-06-15 11:44:05
 * @LastEditors: CQJ
 * @LastEditTime: 2022-06-15 14:43:48
 * @Description: 旋转导航动画
-->
<!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" />
    <link rel="stylesheet" href="style.css" />
    <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"
    />
    <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
@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);    /*逆时针旋转20°*/
}

.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);  /*旋转70°*/
}

.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 .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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
 * @Author: CQJ
 * @Date: 2022-06-15 11:44:19
 * @LastEditors: CQJ
 * @LastEditTime: 2022-06-15 14:04:41
 * @Description: 请填写简介
 */

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'))

总结

主要在于按钮的旋转以及导航栏的变化

其中按钮的旋转又涉及到支点的选择，以本效果为例，关闭按钮在原基础上旋转90°，而且是以左上方的顶点为支点进行旋转

支点实例

另外就是导航栏的变化，在定位之后利用translateX(-100%)从页面中隐藏，点击之后再恢复显示

总的来说，最麻烦的还是圆盘按钮的调整，按钮的定位以及旋转的角度可能需要多次调整。

前端基础实战
#组件练习
Rotating Navigation
https://blog-theta-ten.vercel.app/2022/06/15/Rotating-Navigation/
作者
Chen
发布于
2022年6月15日
许可协议