头两天看到一个登陆页面，是个大熊猫抱着登录框，输入账户的时候还是正常的，当光标跳转到密码框时熊猫刚好把登录框举了起来，挡住了熊猫的眼睛，意思是不会看你输入密码，我感觉寓意挺好，自己也记录一下，留存。
先看看图
html代码：
1 <div class="container">
2 <div class="panda">
3 <div class="ear left"></div>
4 <div class="ear right"></div>
5 <div class="face">
6 <div class="eye-shadow left"></div>
7 <div class="eye-white left">
8 <div class="eye-ball"></div>
9 </div>
10 <div class="eye-shadow right"></div>
11 <div class="eye-white right">
12 <div class="eye-ball"></div>
13 </div>
14 <div class="nose"></div>
15 <div class="mouth"></div>
16 </div>
17 <div class="body"></div>
18 <div class="foot left">
19 <div class="sole"></div>
20 </div>
21 <div class="foot right">
22 <div class="sole"></div>
23 </div>
24 </div>
25 <div class="login-box">
26 <div class="hand left"></div>
27 <div class="hand right"></div>
28 <h1>用户登录</h1>
29 <div class="ipt-box">
30 <input type="text" required>
31 <label>用户名</label>
32 </div>
33 <div class="ipt-box">
34 <input type="password" id="password" required>
35 <label>密码</label>
36 </div>
37 <button>登录</button>
38 </div>
39 </div>
对应的js代码
1// 当密码输入框获得焦点时，向登录框添加类名'up'
2$('#password').focusin(function () {
3 $('.login-box').addClass('up');
4}).focusout(function () {
5 // 当密码输入框失去焦点时，从登录框移除类名'up'
6 $('.login-box').removeClass('up');
7})
8
9// 监听鼠标移动事件
10$(document).on('mousemove', function (e) {
11 // 计算鼠标移动距离与页面宽高的比例
12 let dw = $(document).width() / 10;
13 let dh = $(document).height() / 18;
14 let x = e.pageX / dw;
15 let y = e.pageY / dh;
16
17 // 设置眼珠位置随鼠标移动
18 $('.eye-ball').css({
19 left: x,
20 top: y
21 })
22})
对应的CSS代码
1/* 清除所有元素的默认margin和padding */
2* {
3 margin: 0; /* 清除外边距 */
4 padding: 0; /* 清除内边距 */
5}
6
7/* 设置body的样式 */
8body {
9 height: 100vh; /* 设置body的高度为视口高度的100% */
10 display: flex; /* 使用flex布局 */
11 justify-content: center; /* 在主轴上居中子元素 */
12 align-items: center; /* 在交叉轴上居中子元素 */
13 background: linear-gradient(200deg, #37e2b2, #2fa080); /* 设置背景色为线性渐变 */
14}
15
16/* 设置panda容器的样式 */
17.panda {
18 position: relative; /* 设置相对定位 */
19 width: 200px; /* 设置宽度为200px */
20}
21
22/* 设置face的样式 */
23.face {
24 width: 200px; /* 设置宽度为200px */
25 height: 200px; /* 设置高度为200px */
26 background-color: #fff; /* 设置背景色为白色 */
27 border-radius: 100%; /* 设置边框半径为100%，即圆形 */
28 box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
29 position: relative; /* 设置相对定位 */
30 z-index: 1; /* 设置堆叠顺序 */
31}
32
33/* 设置ear的样式 */
34.ear {
35 width: 70px; /* 设置宽度为70px */
36 height: 70px; /* 设置高度为70px */
37 background-color: #000; /* 设置背景色为黑色 */
38 border-radius: 100%; /* 设置边框半径为100%，即圆形 */
39 position: absolute; /* 设置绝对定位 */
40 top: -10px; /* 设置距离顶部的距离为-10px，使其向上偏移 */
41}
42
43/* 设置右侧的ear样式 */
44.ear.right {
45 right: 0; /* 设置距离容器右侧的距离为0 */
46}
47
48/* 设置eye-shadow的样式 */
49.eye-shadow {
50 width: 50px; /* 设置宽度为50px */
51 height: 80px; /* 设置高度为80px */
52 background-color: #000; /* 设置背景色为黑色 */
53 border-radius: 50%; /* 设置边框半径为50%，即半圆形 */
54 position: absolute; /* 设置绝对定位 */
55 top: 40px; /* 设置距离顶部的距离为40px */
56}
57
58/* 设置左侧的eye-shadow样式 */
59.eye-shadow.left {
60 transform: rotate(45deg); /* 旋转45度 */
61 left: 30px; /* 设置距离容器左侧的距离为30px */
62}
63
64/* 设置右侧的eye-shadow样式 */
65.eye-shadow.right {
66 transform: rotate(-45deg); /* 旋转-45度 */
67 right: 30px; /* 设置距离容器右侧的距离为30px */
68}
69
70/* 设置eye-white的样式 */
71.eye-white {
72 width: 30px; /* 设置宽度为30px */
73 height: 30px; /* 设置高度为30px */
74 background-color: #fff; /* 设置背景色为白色 */
75 border-radius: 100%; /* 设置边框半径为100%，即圆形 */
76 position: absolute; /* 设置绝对定位 */
77 top: 68px; /* 设置距离顶部的距离为68px */
78}
79
80/* 设置左侧的eye-white样式 */
81.eye-white.left {
82 left: 38px; /* 设置距离容器左侧的距离为38px */
83}
84
85/* 设置右侧的eye-white样式 */
86.eye-white.right {
87 right: 38px; /* 设置距离容器右侧的距离为38px */
88}
89
90
91/* 设置眼球的样式 */
92.eye-ball {
93 width: 20px; /* 设置眼球的宽度为20px */
94 height: 20px; /* 设置眼球的高度为20px */
95 background-color: #000; /* 设置眼球的颜色为黑色 */
96 border-radius: 100%; /* 设置边框半径为100%，使眼球呈圆形 */
97 position: absolute; /* 设置为绝对定位，使其可以相对于最近的已定位父元素进行定位 */
98 left: 5px; /* 距离左侧父元素5px */
99 top: 5px; /* 距离顶部父元素5px */
100}
101
102
103/* 设置鼻子的样式 */
104.nose {
105 width: 35px; /* 设置鼻子的宽度为35px */
106 height: 20px; /* 设置鼻子的高度为20px */
107 background-color: #000; /* 设置鼻子的颜色为黑色 */
108 position: absolute; /* 设置为绝对定位 */
109 left: 0; /* 距离左侧父元素0px */
110 right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
111 margin: auto; /* 自动计算左右外边距，使元素水平居中 */
112 bottom: 65px; /* 距离底部父元素65px */
113 border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px; /* 设置水平和垂直边框半径，创建椭圆形状 */
114}
115
116
117
118/* 设置嘴巴的样式 */
119.mouth {
120 width: 68px; /* 设置嘴巴的宽度为68px */
121 height: 25px; /* 设置嘴巴的高度为25px */
122 border-bottom: 7px solid #000; /* 底部边框为7px的实线，颜色为黑色 */
123 border-radius: 50%; /* 设置边框半径为50%，使嘴巴呈半圆形 */
124 position: absolute; /* 设置为绝对定位 */
125 left: 0; /* 距离左侧父元素0px */
126 right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
127 margin: auto; /* 自动计算左右外边距，使元素水平居中 */
128 bottom: 35px; /* 距离底部父元素35px */
129}
130
131
132/* 设置身体的样式 */
133.body {
134 width: 250px; /* 设置身体的宽度为250px */
135 height: 280px; /* 设置身体的高度为280px */
136 background-color: #fff; /* 设置身体的颜色为白色 */
137 position: relative; /* 设置为相对定位，使其可以作为绝对定位元素的参考点 */
138 left: -25px; /* 距离左侧父元素-25px，向左偏移 */
139 top: -10px; /* 距离顶部父元素-10px，向上偏移 */
140 border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px; /* 设置水平和垂直边框半径，创建椭圆形状 */
141 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
142}
143
144
145/* 设置脚的样式 */
146.foot {
147 width: 82px; /* 设置脚的宽度为82px */
148 height: 120px; /* 设置脚的高度为120px */
149 background-color: #000; /* 设置脚的颜色为黑色 */
150 position: absolute; /* 设置为绝对定位 */
151 bottom: 8px; /* 距离底部父元素8px */
152 z-index: 3; /* 设置堆叠顺序为3，以确保在其他元素之上 */
153 border-radius: 40px 40px 35px 40px / 26px 26px 63px 63px; /* 设置水平和垂直边框半径，创建椭圆形状 */
154 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
155}
156
157/* 左脚样式设置 */
158.foot.left {
159 left: -80px; /* 左脚距离其最近的已定位父元素的左侧为-80px，即向左偏移80px */
160}
161
162/* 右脚样式设置 */
163.foot.right {
164 right: -80px; /* 右脚距离其最近的已定位父元素的右侧为-80px，即向右偏移80px */
165 transform: rotateY(180deg); /* 围绕Y轴旋转180度，使右脚朝向与左脚相反 */
166}
167
168/* 脚的内部阴影部分 */
169.foot::after {
170 content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
171 width: 55px; /* 设置内部阴影部分的宽度为55px */
172 height: 65px; /* 设置内部阴影部分的高度为65px */
173 background-color: #222; /* 设置内部阴影部分的颜色为深灰色 */
174 position: absolute; /* 设置为绝对定位 */
175 border-radius: 50%; /* 设置边框半径为50%，使内部阴影部分呈圆形 */
176 left: 0; /* 距离左侧父元素0px */
177 right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
178 margin: auto; /* 自动计算左右外边距，使元素水平居中 */
179 bottom: 10px; /* 距离脚部底部10px */
180}
181
182/* 脚底的样式设置 */
183.foot .sole,
184.foot .sole::before,
185.foot .sole::after {
186 width: 20px; /* 设置脚底及其伪元素的宽度为20px */
187 height: 30px; /* 设置脚底及其伪元素的高度为30px */
188 background-color: #222; /* 设置脚底及其伪元素的颜色为深灰色 */
189 position: absolute; /* 设置为绝对定位 */
190 border-radius: 50%; /* 设置边框半径为50%，使脚底及其伪元素呈圆形 */
191 left: 0; /* 距离左侧父元素0px */
192 right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
193 margin: auto; /* 自动计算左右外边距，使元素水平居中 */
194 top: 8px; /* 距离脚部顶部8px */
195}
196
197/* 脚底左侧伪元素 */
198.foot .sole::before {
199 content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
200 left: -50px; /* 相对于脚底元素向左偏移-50px，即向左偏移50px */
201}
202
203/* 脚底右侧伪元素 */
204.foot .sole::after {
205 content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
206 left: 25px; /* 相对于脚底元素向右偏移25px */
207}
208/* 设置手的样式，以及手的前后伪元素的样式 */
209.hand,
210.hand::before,
211.hand::after {
212 width: 40px; /* 设置宽度为40px */
213 height: 30px; /* 设置高度为30px */
214 background-color: #000; /* 设置背景颜色为黑色 */
215 border-radius: 50px; /* 设置边框半径为50px，这里其实等于width/2，使形状呈圆形 */
216 position: absolute; /* 设置为绝对定位 */
217 top: 70px; /* 距离父元素顶部70px */
218 left: -20px; /* 距离父元素左侧-20px，即向左偏移20px */
219}
220
221/* 设置手的前伪元素样式 */
222.hand::before {
223 content: ""; /* 使用伪元素生成内容，但此处不显示实际内容 */
224 top: 16px; /* 距离手元素顶部16px */
225 left: 0; /* 距离手元素左侧0px */
226}
227
228/* 设置手的后伪元素样式 */
229.hand::after {
230 content: ""; /* 使用伪元素生成内容，但此处不显示实际内容 */
231 top: 32px; /* 距离手元素顶部32px */
232 left: 0; /* 距离手元素左侧0px */
233}
234
235/* 设置右手的样式 */
236.hand.right {
237 right: -20px; /* 距离父元素右侧-20px，即向右偏移20px */
238 left: auto; /* 取消之前的left定位，让right定位生效 */
239}
240
241/* 设置登录框的样式 */
242.login-box {
243 width: 400px; /* 设置宽度为400px */
244 height: 300px; /* 设置高度为300px */
245 background-color: #fff; /* 设置背景颜色为白色 */
246 border-radius: 3px; /* 设置边框半径为3px */
247 box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 设置阴影效果，颜色为半透明的黑色 */
248 position: absolute; /* 设置为绝对定位 */
249 left: 50%; /* 距离父元素左侧50% */
250 top: 50%; /* 距离父元素顶部50% */
251 transform: translate(-50%, -110px); /* 通过transform属性进行位置调整，使其水平居中且向上偏移110px */
252 z-index: 2; /* 设置元素的堆叠顺序，值越大越在上层 */
253 display: flex; /* 设置为flex布局 */
254 justify-content: center; /* 子元素在主轴（默认是水平轴）上居中对齐 */
255 align-items: center; /* 子元素在交叉轴上居中对齐 */
256 flex-direction: column; /* 设置主轴方向为列方向 */
257 transition: 0.3s; /* 设置过渡效果持续时间为0.3秒 */
258}
259
260/* 设置h1标签的样式 */
261h1 {
262 color: #1dc797; /* 设置文字颜色为绿色 */
263 font-weight: bold; /* 设置字体加粗 */
264 margin-bottom: 5px; /* 设置下外边距为5px */
265}
266/* 定义 ipt-box 类的样式，通常用于包裹输入框和标签 */
267.ipt-box {
268 width: 80%; /* 设置容器的宽度为父元素宽度的80% */
269 margin-top: 25px; /* 设置容器上边距为25px */
270 position: relative; /* 设置容器的定位方式为相对定位 */
271}
272
273/* 定义 ipt-box 容器内的 input 元素的样式 */
274.ipt-box input {
275 width: 100%; /* 设置输入框的宽度为父元素宽度的100% */
276 height: 35px; /* 设置输入框的高度为35px */
277 border: none; /* 移除输入框的边框 */
278 border-bottom: 1px solid #bbb; /* 设置输入框底部边框为1px宽，颜色为#bbb */
279 text-indent: 5px; /* 设置输入框内文本的首行缩进为5px */
280 outline: none; /* 移除输入框的默认轮廓线 */
281 transition: 0.3s; /* 设置输入框的过渡效果时长为0.3秒 */
282}
283
284/* 定义 ipt-box 容器内的 label 元素的样式 */
285.ipt-box label {
286 position: absolute; /* 设置标签的定位方式为绝对定位 */
287 left: 5px; /* 设置标签距离父元素左侧的距离为5px */
288 top: 5px; /* 设置标签距离父元素顶部的距离为5px */
289 font-size: 14px; /* 设置标签的字体大小为14px */
290 font-weight: bold; /* 设置标签的字体加粗 */
291 color: #888; /* 设置标签的字体颜色为#888 */
292 transition: 0.3s; /* 设置标签的过渡效果时长为0.3秒 */
293 pointer-events: none; /* 禁止标签接收鼠标事件 */
294}
295
296/* 当 ipt-box 容器内的 input 元素获取焦点或输入有效时，应用以下样式 */
297.ipt-box input:focus,
298.ipt-box input:valid {
299 border-color: #1dc797; /* 设置输入框底部边框颜色为#1dc797 */
300 box-shadow: 0 1px #1dc797; /* 设置输入框的阴影效果 */
301}
302
303/* 当 ipt-box 容器内的 input 元素获取焦点或输入有效时，其相邻的 label 元素应用以下样式 */
304.ipt-box input:focus~label,
305.ipt-box input:valid~label {
306 color: #1dc797; /* 设置标签的字体颜色为#1dc797 */
307 font-size: 12px; /* 设置标签的字体大小为12px */
308 font-weight: bold; /* 设置标签的字体加粗 */
309 transform: translateY(-15px); /* 将标签向下移动15px */
310}
311
312/* 定义 button 元素的样式 */
313button {
314 width: 150px; /* 设置按钮的宽度为150px */
315 height: 40px; /* 设置按钮的高度为40px */
316 background-color: #1dc797; /* 设置按钮的背景颜色为#1dc797 */
317 border: none; /* 移除按钮的边框 */
318 border-radius: 3px; /* 设置按钮的边框圆角为3px */
319 margin-top: 30px; /* 设置按钮的上边距为30px */
320 color: #fff; /* 设置按钮的字体颜色为白色 */
321 letter-spacing: 10px; /* 设置按钮内文本的字符间距为10px */
322 text-indent: 10px; /* 设置按钮内文本的首行缩进为10px */
323 cursor: pointer; /* 设置鼠标悬停在按钮上时显示小手图标 */
324 transition: 0.3s; /* 设置按钮的过渡效果时长为0.3秒 */
325}
326
327/* 当鼠标悬停在 button 元素上时，应用以下样式 */
328button:hover {
329 letter-spacing: 25px; /* 设置按钮内文本的字符间距为25px */
330 text-indent: 25px; /* 设置按钮内文本的首行缩进为25px */
331 background-color: #2fa080; /* 设置按钮的背景颜色为#2fa080 */
332}
333
334/* 为元素添加 transform 属性，将其沿 x 轴向左移动其宽度的50%，并沿 y 轴向上移动180像素 */
335.up {
336 transform: translate(-50%, -180px);
337}
