绝绝美登录界面!滑动切换效果,图片背景html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>绝美登录界面!滑动切换效果</title>
</head>
<style>
* {
/* 禁止文本选中 */
user-select: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
}
p,
h1 {
color: rgb(255, 255, 255);
}
.box {
width: 525px;
height: 300px;
display: flex;
position: relative;
border-radius: 8px;
margin: auto;
border: 1px solid rgba(255, 255, 255, 6);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 4px 4px 3px rgba(255, 255, 255, 0.6),
inset -4px -4px 3px rgba(0, 0, 0, 0.6);
}
.pre-box {
width: calc(525px / 2);
height: 100%;
left: 0;
top: 0;
position: absolute;
border: 5px;
background-color: #FFE4E1;
transition: 0.5s ease-in-out;
border-radius: 8px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.pre-box h1 {
margin-top: 45px;
text-align: center;
letter-spacing: 5px;
text-shadow:
2px 2px 2px #ddd,
4px 4px 2px #bbb,
6px 6px 2px #999,
8px 8px 2px #777;
}
.pre-box p {
height: 25px;
line-height: 25px;
text-align: center;
margin: 10px 0;
font-weight: bold;
text-shadow: 2px 2px 2px #100000;
text-shadow:
2px 2px 2px #ddd,
3px 3px 2px #bbb;
}
.img-box {
width: 100px;
height: 100px;
margin: 10px auto;
border-radius: 50%;
overflow: hidden;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.img-box img {
width: 100%;
height: 100%;
}
.login-form {
margin: 120px auto;
}
.login-form,
.register-form {
flex: 1;
height: 100%;
margin: 40px auto;
}
.title-box {
height: 50px;
line-height: 4px;
}
.title-box h1 {
text-align: center;
letter-spacing: 5px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
.input-box {
display: flex;
flex-direction: column;
align-items: center;
}
input {
width: 60%;
height: 25px;
margin-bottom: 20px;
text-indent: 4px;
border-radius: 6px;
box-shadow: 0px 0px 5px 5px #c4e1cf;
}
input:focus {
color: rgb(61, 185, 71);
}
.btn-box {
display: flex;
justify-content: center;
}
button {
width: 100px;
height: 30px;
margin: 0 7px;
border: none;
border-radius: 6px;
color: #fff;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #100000;
}
button:hover {
cursor: pointer;
opacity: .4;
background-color: aqua;
}
.btn-box p {
height: 30px;
line-height: 30px;
font-size: 14px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 8px;
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
text-shadow: 1px 1px 1px #d3bfbf;
}
button:hover,
.btn-box p:hover {
cursor: pointer;
background-color: rgb(251, 16, 16);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2) 30%,
rgba(0, 0, 0, 0));
box-shadow:
inset 2px 2px 3px rgba(255, 255, 255, 0.6),
inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.btn-box p:active,
button:active {
box-shadow:
inset -2px -2px 3px rgba(255, 255, 255, 0.6),
inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
::placeholder {
color: rgb(36, 192, 127);
letter-spacing: 25px;
font-size: 15px;
}
</style>
<body background="beij.png" style="background-repeat:no-repeat;
background-attachment:fixed;
background-size:100% 100%; ">
<div class="box">
<div class="pre-box">
<h1>欢迎</h1>
<P>加入我们!</P>
<div class="img-box">
<img src="tuzi4.png" alt="正方形图片">
</div>
</div>
<div class="register-form">
<div class="title-box">
<h1>注册</h1>
</div>
<div class="input-box">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="password" placeholder="确认密码">
</div>
<div class="btn-box">
<button>注册</button>
<p onclick="mySwitch()">已有账号?去登录</p>
</div>
</div>
<div class="login-form">
<div class="title-box">
<h1>登录</h1>
</div>
<div class="input-box">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
</div>
<div class="btn-box">
<button>登录</button>
<p onclick="mySwitch()">没有账号?去注册</p>
</div>
</div>
</div>
<script>
let flag = true
const mySwitch = () => {
if (flag) {
$(".pre-box").css("transform", "translateX(100%)")
$(".pre-box").css("background-color", "#c9e0ed")
$("img").attr("src", "tuzi3.jpg")
}
else {
$(".pre-box").css("transform", "translateX(0%)")
$(".pre-box").css("background-color", "#edd4dc")
$("img").attr("src", "tuzi4.png")
}
flag = !flag
}
</script>
</body>
</html>
视频为背景HTML代码:
<div class="video">
<video autoplay loop muted width="100%" height="100%">
<source src="video.mp4" type="video/mp4">
</video>
</div>
视频为背景css代码:
body {
/* 相对定位 */
position: relative;
width: 100%;
height: 100vh;
}
.video {
/* 绝对定位 */
position: absolute;
object-fit: contain;
min-width: 100%;
min-height: 100%;
/* 视频不显示控制栏 */
object-fit: cover;
/* 视频定位方式设为固定 */
position: fixed;
/* //视频位置 */
right: 0;
bottom: 0;
/* 不会因视频尺寸造成页面需要滚动 */
width: auto;
height: auto;
/* z轴定位 */
z-index: -100;
/* 添加灰度蒙版,如果设定为100%则视频显示为黑白 */
filter: grayscale(20%);
}