效果演示
实现了一个可爱的熊猫登录界面，页面背景使用了渐变色，熊猫的头部和身体使用了圆形和椭圆形的边框，使用了CSS的伪元素和阴影效果来实现熊猫的手和脚。登录框使用了flex布局，包括用户名和密码的输入框和登录按钮，使用了CSS的过渡效果和伪类来实现输入框的动态效果。整个页面使用了响应式布局，可以适应不同大小的屏幕。
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熊猫登录表单</title>
<link rel="stylesheet" href="./08-熊猫登录表单.css">
</head>
<body>
<div class="container">
<div class="panda">
<div class="ear left"></div>
<div class="ear right"></div>
<div class="face">
<div class="eye-shadow left"></div>
<div class="eye-white left">
<div class="eye-ball"></div>
</div>
<div class="eye-shadow right"></div>
<div class="eye-white right">
<div class="eye-ball"></div>
</div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
<div class="body"></div>
<div class="foot left">
<div class="sole"></div>
</div>
<div class="foot right">
<div class="sole"></div>
</div>
</div>
<div class="login-box">
<div class="hand left"></div>
<div class="hand right"></div>
<h1>用户登录</h1>
<div class="ipt-box">
<input type="text" required>
<label>用户名</label>
</div>
<div class="ipt-box">
<input type="password" id="password" required>
<label>密码</label>
</div>
<button>登录</button>
</div>
</div>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="./08-熊猫登录表单.js"></script>
</body>
</html>
/* 清除所有元素的默认margin和padding */
* {
margin: 0; /* 清除外边距 */
padding: 0; /* 清除内边距 */
}
/* 设置body的样式 */
body {
height: 100vh; /* 设置body的高度为视口高度的100% */
display: flex; /* 使用flex布局 */
justify-content: center; /* 在主轴上居中子元素 */
align-items: center; /* 在交叉轴上居中子元素 */
background: linear-gradient(200deg, #37e2b2, #2fa080); /* 设置背景色为线性渐变 */
}
/* 设置panda容器的样式 */
.panda {
position: relative; /* 设置相对定位 */
width: 200px; /* 设置宽度为200px */
}
/* 设置face的样式 */
.face {
width: 200px; /* 设置宽度为200px */
height: 200px; /* 设置高度为200px */
background-color: #fff; /* 设置背景色为白色 */
border-radius: 100%; /* 设置边框半径为100%，即圆形 */
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
position: relative; /* 设置相对定位 */
z-index: 1; /* 设置堆叠顺序 */
}
/* 设置ear的样式 */
.ear {
width: 70px; /* 设置宽度为70px */
height: 70px; /* 设置高度为70px */
background-color: #000; /* 设置背景色为黑色 */
border-radius: 100%; /* 设置边框半径为100%，即圆形 */
position: absolute; /* 设置绝对定位 */
top: -10px; /* 设置距离顶部的距离为-10px，使其向上偏移 */
}
/* 设置右侧的ear样式 */
.ear.right {
right: 0; /* 设置距离容器右侧的距离为0 */
}
/* 设置eye-shadow的样式 */
.eye-shadow {
width: 50px; /* 设置宽度为50px */
height: 80px; /* 设置高度为80px */
background-color: #000; /* 设置背景色为黑色 */
border-radius: 50%; /* 设置边框半径为50%，即半圆形 */
position: absolute; /* 设置绝对定位 */
top: 40px; /* 设置距离顶部的距离为40px */
}
/* 设置左侧的eye-shadow样式 */
.eye-shadow.left {
transform: rotate(45deg); /* 旋转45度 */
left: 30px; /* 设置距离容器左侧的距离为30px */
}
/* 设置右侧的eye-shadow样式 */
.eye-shadow.right {
transform: rotate(-45deg); /* 旋转-45度 */
right: 30px; /* 设置距离容器右侧的距离为30px */
}
/* 设置eye-white的样式 */
.eye-white {
width: 30px; /* 设置宽度为30px */
height: 30px; /* 设置高度为30px */
background-color: #fff; /* 设置背景色为白色 */
border-radius: 100%; /* 设置边框半径为100%，即圆形 */
position: absolute; /* 设置绝对定位 */
top: 68px; /* 设置距离顶部的距离为68px */
}
/* 设置左侧的eye-white样式 */
.eye-white.left {
left: 38px; /* 设置距离容器左侧的距离为38px */
}
/* 设置右侧的eye-white样式 */
.eye-white.right {
right: 38px; /* 设置距离容器右侧的距离为38px */
}
/* 设置眼球的样式 */
.eye-ball {
width: 20px; /* 设置眼球的宽度为20px */
height: 20px; /* 设置眼球的高度为20px */
background-color: #000; /* 设置眼球的颜色为黑色 */
border-radius: 100%; /* 设置边框半径为100%，使眼球呈圆形 */
position: absolute; /* 设置为绝对定位，使其可以相对于最近的已定位父元素进行定位 */
left: 5px; /* 距离左侧父元素5px */
top: 5px; /* 距离顶部父元素5px */
}
/* 设置鼻子的样式 */
.nose {
width: 35px; /* 设置鼻子的宽度为35px */
height: 20px; /* 设置鼻子的高度为20px */
background-color: #000; /* 设置鼻子的颜色为黑色 */
position: absolute; /* 设置为绝对定位 */
left: 0; /* 距离左侧父元素0px */
right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
margin: auto; /* 自动计算左右外边距，使元素水平居中 */
bottom: 65px; /* 距离底部父元素65px */
border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px; /* 设置水平和垂直边框半径，创建椭圆形状 */
}
/* 设置嘴巴的样式 */
.mouth {
width: 68px; /* 设置嘴巴的宽度为68px */
height: 25px; /* 设置嘴巴的高度为25px */
border-bottom: 7px solid #000; /* 底部边框为7px的实线，颜色为黑色 */
border-radius: 50%; /* 设置边框半径为50%，使嘴巴呈半圆形 */
position: absolute; /* 设置为绝对定位 */
left: 0; /* 距离左侧父元素0px */
right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
margin: auto; /* 自动计算左右外边距，使元素水平居中 */
bottom: 35px; /* 距离底部父元素35px */
}
/* 设置身体的样式 */
.body {
width: 250px; /* 设置身体的宽度为250px */
height: 280px; /* 设置身体的高度为280px */
background-color: #fff; /* 设置身体的颜色为白色 */
position: relative; /* 设置为相对定位，使其可以作为绝对定位元素的参考点 */
left: -25px; /* 距离左侧父元素-25px，向左偏移 */
top: -10px; /* 距离顶部父元素-10px，向上偏移 */
border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px; /* 设置水平和垂直边框半径，创建椭圆形状 */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}
/* 设置脚的样式 */
.foot {
width: 82px; /* 设置脚的宽度为82px */
height: 120px; /* 设置脚的高度为120px */
background-color: #000; /* 设置脚的颜色为黑色 */
position: absolute; /* 设置为绝对定位 */
bottom: 8px; /* 距离底部父元素8px */
z-index: 3; /* 设置堆叠顺序为3，以确保在其他元素之上 */
border-radius: 40px 40px 35px 40px / 26px 26px 63px 63px; /* 设置水平和垂直边框半径，创建椭圆形状 */
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
}
/* 左脚样式设置 */
.foot.left {
left: -80px; /* 左脚距离其最近的已定位父元素的左侧为-80px，即向左偏移80px */
}
/* 右脚样式设置 */
.foot.right {
right: -80px; /* 右脚距离其最近的已定位父元素的右侧为-80px，即向右偏移80px */
transform: rotateY(180deg); /* 围绕Y轴旋转180度，使右脚朝向与左脚相反 */
}
/* 脚的内部阴影部分 */
.foot::after {
content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
width: 55px; /* 设置内部阴影部分的宽度为55px */
height: 65px; /* 设置内部阴影部分的高度为65px */
background-color: #222; /* 设置内部阴影部分的颜色为深灰色 */
position: absolute; /* 设置为绝对定位 */
border-radius: 50%; /* 设置边框半径为50%，使内部阴影部分呈圆形 */
left: 0; /* 距离左侧父元素0px */
right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
margin: auto; /* 自动计算左右外边距，使元素水平居中 */
bottom: 10px; /* 距离脚部底部10px */
}
/* 脚底的样式设置 */
.foot .sole,
.foot .sole::before,
.foot .sole::after {
width: 20px; /* 设置脚底及其伪元素的宽度为20px */
height: 30px; /* 设置脚底及其伪元素的高度为30px */
background-color: #222; /* 设置脚底及其伪元素的颜色为深灰色 */
position: absolute; /* 设置为绝对定位 */
border-radius: 50%; /* 设置边框半径为50%，使脚底及其伪元素呈圆形 */
left: 0; /* 距离左侧父元素0px */
right: 0; /* 距离右侧父元素0px，这里和left一起使用是为了水平居中 */
margin: auto; /* 自动计算左右外边距，使元素水平居中 */
top: 8px; /* 距离脚部顶部8px */
}
/* 脚底左侧伪元素 */
.foot .sole::before {
content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
left: -50px; /* 相对于脚底元素向左偏移-50px，即向左偏移50px */
}
/* 脚底右侧伪元素 */
.foot .sole::after {
content: ""; /* 使用伪元素生成内容，但不显示实际内容 */
left: 25px; /* 相对于脚底元素向右偏移25px */
}
/* 设置手的样式，以及手的前后伪元素的样式 */
.hand,
.hand::before,
.hand::after {
width: 40px; /* 设置宽度为40px */
height: 30px; /* 设置高度为30px */
background-color: #000; /* 设置背景颜色为黑色 */
border-radius: 50px; /* 设置边框半径为50px，这里其实等于width/2，使形状呈圆形 */
position: absolute; /* 设置为绝对定位 */
top: 70px; /* 距离父元素顶部70px */
left: -20px; /* 距离父元素左侧-20px，即向左偏移20px */
}
/* 设置手的前伪元素样式 */
.hand::before {
content: ""; /* 使用伪元素生成内容，但此处不显示实际内容 */
top: 16px; /* 距离手元素顶部16px */
left: 0; /* 距离手元素左侧0px */
}
/* 设置手的后伪元素样式 */
.hand::after {
content: ""; /* 使用伪元素生成内容，但此处不显示实际内容 */
top: 32px; /* 距离手元素顶部32px */
left: 0; /* 距离手元素左侧0px */
}
/* 设置右手的样式 */
.hand.right {
right: -20px; /* 距离父元素右侧-20px，即向右偏移20px */
left: auto; /* 取消之前的left定位，让right定位生效 */
}
/* 设置登录框的样式 */
.login-box {
width: 400px; /* 设置宽度为400px */
height: 300px; /* 设置高度为300px */
background-color: #fff; /* 设置背景颜色为白色 */
border-radius: 3px; /* 设置边框半径为3px */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); /* 设置阴影效果，颜色为半透明的黑色 */
position: absolute; /* 设置为绝对定位 */
left: 50%; /* 距离父元素左侧50% */
top: 50%; /* 距离父元素顶部50% */
transform: translate(-50%, -110px); /* 通过transform属性进行位置调整，使其水平居中且向上偏移110px */
z-index: 2; /* 设置元素的堆叠顺序，值越大越在上层 */
display: flex; /* 设置为flex布局 */
justify-content: center; /* 子元素在主轴（默认是水平轴）上居中对齐 */
align-items: center; /* 子元素在交叉轴上居中对齐 */
flex-direction: column; /* 设置主轴方向为列方向 */
transition: 0.3s; /* 设置过渡效果持续时间为0.3秒 */
}
/* 设置h1标签的样式 */
h1 {
color: #1dc797; /* 设置文字颜色为绿色 */
font-weight: bold; /* 设置字体加粗 */
margin-bottom: 5px; /* 设置下外边距为5px */
}
/* 定义 ipt-box 类的样式，通常用于包裹输入框和标签 */
.ipt-box {
width: 80%; /* 设置容器的宽度为父元素宽度的80% */
margin-top: 25px; /* 设置容器上边距为25px */
position: relative; /* 设置容器的定位方式为相对定位 */
}
/* 定义 ipt-box 容器内的 input 元素的样式 */
.ipt-box input {
width: 100%; /* 设置输入框的宽度为父元素宽度的100% */
height: 35px; /* 设置输入框的高度为35px */
border: none; /* 移除输入框的边框 */
border-bottom: 1px solid #bbb; /* 设置输入框底部边框为1px宽，颜色为#bbb */
text-indent: 5px; /* 设置输入框内文本的首行缩进为5px */
outline: none; /* 移除输入框的默认轮廓线 */
transition: 0.3s; /* 设置输入框的过渡效果时长为0.3秒 */
}
/* 定义 ipt-box 容器内的 label 元素的样式 */
.ipt-box label {
position: absolute; /* 设置标签的定位方式为绝对定位 */
left: 5px; /* 设置标签距离父元素左侧的距离为5px */
top: 5px; /* 设置标签距离父元素顶部的距离为5px */
font-size: 14px; /* 设置标签的字体大小为14px */
font-weight: bold; /* 设置标签的字体加粗 */
color: #888; /* 设置标签的字体颜色为#888 */
transition: 0.3s; /* 设置标签的过渡效果时长为0.3秒 */
pointer-events: none; /* 禁止标签接收鼠标事件 */
}
/* 当 ipt-box 容器内的 input 元素获取焦点或输入有效时，应用以下样式 */
.ipt-box input:focus,
.ipt-box input:valid {
border-color: #1dc797; /* 设置输入框底部边框颜色为#1dc797 */
box-shadow: 0 1px #1dc797; /* 设置输入框的阴影效果 */
}
/* 当 ipt-box 容器内的 input 元素获取焦点或输入有效时，其相邻的 label 元素应用以下样式 */
.ipt-box input:focus~label,
.ipt-box input:valid~label {
color: #1dc797; /* 设置标签的字体颜色为#1dc797 */
font-size: 12px; /* 设置标签的字体大小为12px */
font-weight: bold; /* 设置标签的字体加粗 */
transform: translateY(-15px); /* 将标签向下移动15px */
}
/* 定义 button 元素的样式 */
button {
width: 150px; /* 设置按钮的宽度为150px */
height: 40px; /* 设置按钮的高度为40px */
background-color: #1dc797; /* 设置按钮的背景颜色为#1dc797 */
border: none; /* 移除按钮的边框 */
border-radius: 3px; /* 设置按钮的边框圆角为3px */
margin-top: 30px; /* 设置按钮的上边距为30px */
color: #fff; /* 设置按钮的字体颜色为白色 */
letter-spacing: 10px; /* 设置按钮内文本的字符间距为10px */
text-indent: 10px; /* 设置按钮内文本的首行缩进为10px */
cursor: pointer; /* 设置鼠标悬停在按钮上时显示小手图标 */
transition: 0.3s; /* 设置按钮的过渡效果时长为0.3秒 */
}
/* 当鼠标悬停在 button 元素上时，应用以下样式 */
button:hover {
letter-spacing: 25px; /* 设置按钮内文本的字符间距为25px */
text-indent: 25px; /* 设置按钮内文本的首行缩进为25px */
background-color: #2fa080; /* 设置按钮的背景颜色为#2fa080 */
}
/* 为元素添加 transform 属性，将其沿 x 轴向左移动其宽度的50%，并沿 y 轴向上移动180像素 */
.up {
transform: translate(-50%, -180px);
}
// 当密码输入框获得焦点时，向登录框添加类名'up'
$('#password').focusin(function () {
$('.login-box').addClass('up');
}).focusout(function () {
// 当密码输入框失去焦点时，从登录框移除类名'up'
$('.login-box').removeClass('up');
})
// 监听鼠标移动事件
$(document).on('mousemove', function (e) {
// 计算鼠标移动距离与页面宽高的比例
let dw = $(document).width() / 10;
let dh = $(document).height() / 18;
let x = e.pageX / dw;
let y = e.pageY / dh;
// 设置眼珠位置随鼠标移动
$('.eye-ball').css({
left: x,
top: y
})
})
实现思路拆分
* {
margin: 0;
padding: 0;
}
这段代码设置了所有元素的外边距和内边距为0，这是为了避免不同浏览器之间的默认样式差异。
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(200deg, #37e2b2, #2fa080);
}
这段代码设置了页面的样式，将其高度设置为视口高度，使用flex布局，将其水平和垂直居中，设置了背景色为渐变色。
.panda {
position: relative;
width: 200px;
}
这段代码设置了熊猫的样式，将其定位为相对定位，宽度为200px。
.face {
width: 200px;
height: 200px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.15);
position: relative;
z-index: 1;
}
这段代码设置了熊猫的脸部样式，将其宽度和高度设置为200px，背景色为白色，边框为圆形，设置了阴影效果和层级。
.ear {
width: 70px;
height: 70px;
background-color: #000;
border-radius: 100%;
position: absolute;
top: -10px;
}
这段代码设置了熊猫的耳朵样式，将其宽度和高度设置为70px，背景色为黑色，边框为圆形，定位在脸部上方。
.ear.right {
right: 0;
}
这段代码设置了熊猫右耳的样式，将其定位在脸部右侧。
.eye-shadow {
width: 50px;
height: 80px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 40px;
}
这段代码设置了熊猫的眼影样式，将其宽度和高度设置为50px和80px，背景色为黑色，边框为圆形，定位在脸部上方。
.eye-shadow.left {
transform: rotate(45deg);
left: 30px;
}
.eye-shadow.right {
transform: rotate(-45deg);
right: 30px;
}
这段代码设置了熊猫的眼影的位置和旋转角度，将左眼影旋转45度并定位在左侧，将右眼影旋转-45度并定位在右侧。
.eye-white {
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 100%;
position: absolute;
top: 68px;
}
.eye-white.left {
left: 38px;
}
.eye-white.right {
right: 38px;
}
这段代码设置了熊猫的眼白样式，将其宽度和高度设置为30px，背景色为白色，边框为圆形，定位在眼影上方。
.eye-ball {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 100%;
position: absolute;
left: 5px;
top: 5px;
}
这段代码设置了熊猫的眼珠样式，将其宽度和高度设置为20px，背景色为黑色，边框为圆形，定位在眼白上方。
.nose {
width: 35px;
height: 20px;
background-color: #000;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 65px;
border-radius: 42px 42px 60px 60px / 30px 30px 60px 60px;
}
这段代码设置了熊猫的鼻子样式，将其宽度和高度设置为35px和20px，背景色为黑色，定位在脸部下方，设置了不规则的边框。
.mouth {
width: 68px;
height: 25px;
border-bottom: 7px solid #000;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
margin: auto;
bottom: 35px;
}
这段代码设置了熊猫的嘴巴样式，将其宽度和高度设置为68px和25px，设置了半圆形的边框和下边框，定位在脸部下方。
.body {
width: 250px;
height: 280px;
background-color: #fff;
position: relative;
left: -25px;
top: -10px;
border-radius: 100px 100px 100px 100px / 126px 126px 96px 96px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
这段代码设置了熊猫的身体样式，将其宽度和高度设置为250px和280px，背景色为白色，定位在脸部下方，设置了不规则的边框和阴影效果。
.foot {
width: 82px;
height: 120px;
background-color: #000;
position: absolute;
bottom: 8px;
z-index: 3;
border-radius: 40px 40px 35px 40px / 26px 26px 63px 63px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}
.foot.left {
left: -80px;
}
.foot.right {
right: -80px;
transform: rotateY(180deg);
}
这段代码设置了熊猫的脚样式，将其宽度和高度设置为82px和120px，背景色为黑色，定位在身体下方，设置了不规则的边框和阴影效果，左脚定位在身体左侧，右脚定位在身体右侧并翻转180度。
.foot::after {
content: "";
width: 55px;
height: 65px;
background-color: #222;
position: absolute;
border-radius: 50%;
left: 0;
right: 0;
margin: auto;
bottom: 10px;
}
这段代码设置了熊猫脚底的样式，将其宽度和高度设置为55px和65px，背景色为黑色，边框为圆形，定位在脚的下方。
.foot .sole,
.foot .sole::before,
.foot .sole::after {
width: 20px;
height: 30px;
background-color: #222;
position: absolute;
border-radius: 50%;
left: 0;
right: 0;
margin: auto;
top: 8px;
}
.foot .sole::before {
content: "";
left: -50px;
}
.foot .sole::after {
content: "";
left: 25px;
}
这段代码设置了熊猫脚底的样式，包括脚掌和脚趾，将其宽度和高度设置为20px和30px，背景色为黑色，边框为圆形，定位在脚的下方。
.hand,
.hand::before,
.hand::after {
width: 40px;
height: 30px;
background-color: #000;
border-radius: 50px;
position: absolute;
top: 70px;
left: -20px;
}
.hand::before {
content: "";
top: 16px;
left: 0;
}
.hand::after {
content: "";
top: 32px;
left: 0;
}
.hand.right {
right: -20px;
left: auto;
}
这段代码设置了熊猫的手样式，包括手臂和手掌，将其宽度和高度设置为40px和30px，背景色为黑色，边框为圆形，定位在脸部两侧，右手定位在右侧。
.login-box {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -110px);
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.3s;
}
这段代码设置了登录框的样式，将其宽度和高度设置为400px和300px，背景色为白色，设置了边框和阴影效果，定位在页面中心，使用flex布局，设置了过渡效果。
h1 {
color: #1dc797;
font-weight: normal;
margin-bottom: 5px;
}
这段代码设置了登录框中标题的样式，将其字体颜色设置为绿色，字体加粗，下边距设置为5px。
.ipt-box {
width: 80%;
margin-top: 25px;
position: relative;
}
.ipt-box input {
width: 100%;
height: 35px;
border: none;
border-bottom: 1px solid #bbb;
text-indent: 5px;
outline: none;
transition: 0.3s;
}
.ipt-box label {
position: absolute;
left: 5px;
top: 5px;
font-size: 14px;
color: #888;
transition: 0.3s;
pointer-events: none;
}
.ipt-box input:focus,
.ipt-box input:valid {
border-color: #1dc797;
box-shadow: 0 1px #1dc797;
}
.ipt-box input:focus ~ label,
.ipt-box input:valid ~ label {
color: #1dc797;
font-size: 12px;
transform: translateY(-15px);
}
这段代码设置了登录框中输入框的样式，将其宽度设置为80%，上边距设置为25px，使用相对定位，设置了输入框的边框和过渡效果，使用绝对定位，设置了输入框的标签样式和动态效果。
button {
width: 150px;
height: 40px;
background-color: #1dc797;
border: none;
border-radius: 3px;
margin-top: 30px;
color: #fff;
letter-spacing: 10px;
text-indent: 10px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
letter-spacing: 25px;
text-indent: 25px;
background-color: #2fa080;
}
这段代码设置了登录框中登录按钮的样式，将其宽度和高度设置为150px和40px，背景色为绿色，设置了边框和过渡效果，鼠标悬停时设置了字体间距和背景色的变化。
.up {
transform: translate(-50%, -180px);
}
这段代码设置了登录框在点击登录按钮后的动态效果，将其向上移动180px。
693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
