实例：超时空背景的登录界面
技术栈：HTML+CSS
效果：
源码：
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>超时空背景的登录界面</title>
<link rel="stylesheet" href="../css/90.css">
</head>
<body>
<div class="container">
<div class="wrap">
<div class="wall wall-top"></div>
<div class="wall wall-bottom"></div>
<div class="wall wall-left"></div>
<div class="wall wall-right"></div>
<div class="wall wall-back"></div>
</div>
<div class="form-box">
<div class="tit">login</div>
<input type="text" placeholder="账号">
<input type="password" placeholder="密码">
<button>登录</button>
<span>没有账号？<a href="#">去注册</a></span>
</div>
</div>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
/* 溢出隐藏 */
overflow: hidden;
}
.container{
/* 设置视距 */
perspective: 5px;
/* 设置3D元素的基点位置 */
perspective-origin: 50% 50%;
}
.wrap{
/* 绝对定位 */
position: absolute;
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
/* 开启3D效果 */
transform-style: preserve-3d;
/* 执行动画：动画名 时长 线性的 无限次播放 */
animation: move 20s linear infinite;
}
.wall{
position: absolute;
width: 100%;
height: 100%;
background: url("../images/space1.jpg") no-repeat;
/* 保持原有尺寸比例，裁切长边 */
background-size: cover;
}
/* 为各个方位的“墙壁”设置旋转角度、Z轴位移 */
.wall-top{
transform: rotateX(90deg) translateZ(500px);
}
.wall-bottom{
transform: rotateX(-90deg) translateZ(500px);
}
.wall-left{
transform: rotateY(-90deg) translateZ(500px);
}
.wall-right{
transform: rotateY(90deg) translateZ(500px);
}
.wall-back{
transform: rotateX(180deg) translateZ(500px);
}
/* 登录框 */
.form-box{
/* 相对定位 */
position: relative;
z-index: 1;
background-color: rgba(255,255,255,0.1);
/* 背景模糊 */
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,0.5);
border-left: 1px solid rgba(255,255,255,0.5);
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
width: 400px;
height: 550px;
/* 阴影 */
box-shadow: 0px 20px 50px rgba(0,0,0,0.5);
}
.form-box .tit{
color: #fff;
font-size: 40px;
font-weight: bold;
/* 大写 */
text-transform: uppercase;
/* 字间距 */
letter-spacing: 10px;
text-indent: 10px;
margin: 90px auto 50px auto;
}
.form-box input{
width: 300px;
height: 30px;
background: transparent;
text-indent: 8px;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.8);
margin: 15px auto;
outline: none;
color: #fff;
}
.form-box input::placeholder{
color: rgba(255,255,255,0.8);
}
.form-box button{
width: 300px;
height: 40px;
margin: 35px auto 40px auto;
border: none;
background: #00addd;
color: #fff;
letter-spacing: 20px;
text-indent: 20px;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
}
.form-box button:hover{
background: #0098d4;
}
.form-box span{
font-size: 14px;
color: #fff;
}
.form-box a{
color: #00addd;
text-decoration: none;
}
/* 定义动画 */
@keyframes move {
0%{
transform: rotate(0deg) translateZ(-500px);
}
100%{
transform: rotate(90deg) translateZ(500px);
}
}
