登录效果
<!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">
<title>login</title>
<style>
body{
background-image: linear-gradient(to left,
#9c88ff,#3cadeb);
display: flex;
justify-content: center;
}
.a{
position:relative;
top: 100px;
width: 1100px;
height: 550px;
box-shadow: 0 5px 15px rgba(0,0,0,.8);
display: flex;
}
.b{
width: 800px;
height: 550px;
background-image: url("201515-158211451517f1.jpg");
background-size: cover;
}
.c{
width: 300px;
height: 550px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.d{
width: 250px;
height: 500px;
}
.d h1{
font: 900 30px '';
}
.e{
width: 230px;
margin: 20px 0;
outline: none;
border: 0;
padding: 10px;
border-bottom: 3px solid rgb(80,80,170);
font: 900 16px '';
}
.f{
float: right;
margin: 10px 0;
}
.g{
position: absolute;
margin: 20px;
bottom: 40px;
display: block;
width: 200px;
height: 60px;
font: 900 30px '';
text-decoration: none;
line-height: 50px;
border-radius: 30px;
background-image: linear-gradient(to left,
#9c88ff,#3cadeb);
text-align: center;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">
<div class="d">
<h1>Login/Register</h1>
<input type="text" class="e" placeholder="USER NAME">
<input type="text" class="e" placeholder="ACCOUNT">
<input type="password" class="e" placeholder="PASSWORD">
<a href="#" class="f">Forget the passrword?</a>
<a href="#" class="g">Login</a>
</div>
</div>
</div>
</body>
</html>
视觉差效果
<style>
body {
display: flex;
justify-content: center;
background-color: rgb(119 157 193);
}
.a{
position: relative;
top: 100px;
width: 1000px;
height: 600px;
background-image: url("201515-158211451517f1.jpg");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.b,
.c,
.d,
.e{
position: absolute;
width: 1000px;
height: 600px;
filter: drop-shadow(4px 4px 12px rgba(0,0,0,.5));
background-size: cover;
opacity: .7;
transition: .5s;
}
.b::after,
.c::after,
.d::after,
.e::after{
content: "";
position: absolute;
width: 1000px;
height: 600px;
background-image: url("201515-158211451517f1.jpg");
}
.b{
left: -400px;
transform: rotateZ(100deg);
overflow: hidden;
}
.b::after{
transform: rotateZ(-100deg);
}
.c{
left: -400px;
transform: rotateZ(-100deg);
overflow: hidden;
}
.c::after{
transform: rotateZ(100deg);
}
.d{
right: -400px;
transform: rotateZ(105deg);
overflow: hidden;
}
.d::after{
transform: rotateZ(-105deg);
}
.e{
right: -400px;
transform: rotateZ(-100deg);
overflow: hidden;
}
.e::after{
transform: rotateZ(100deg);
}
.f{
opacity: 0;
font: 900 50px '';
letter-spacing: 10px;
color: rgb(60,60,70);
transition: .5s;
}
.a:hover .b{
left: -550px;
}
.a:hover .c{
left: -600px;
}
.a:hover .d{
right: -550px;
}
.a:hover .e{
right: -610px;
}
.a:hover .f{
opacity: 1;
}
</style>
</head>
<div class="a">
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<p class="f">LONELY GOAT</p>
</div>
<body>
监听器
<style>
*{
padding: 0;
margin: 0;
}
body{
display: flex;
justify-content: center;
overflow: hidden;
}
.shell{
width: 100%;
height: 162px;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="shell">
<video loop autoplay src="81909048-c89a-4106-880c-175d52c70140.mp4" class="video"
style="height: 100%;transform: translate(36px,-8px);"></video>
</div>
<script>
const shell = document.querySelector(".shell")
const video = document.querySelector(".video")
shell.addEventListener('mouseenter',function(e){
this.x=e.clientX
video.style.transition = 'none'
})
shell.addEventListener('mousemove',function(e){
this._x=e.clientX
const disx = this._x-this.x
const move = 36 -disx/-20
video.style.transform = `translate(${move}px,-8px)`
})
shell.addEventListener('mouseleave',function(e){
video.style.transition = .3 +'s'
video.style.transform = 'translate(36px,-8px)'
})
</script>
鼠标悬停分裂
<style>
body{
background-color: rgb(60,60,70);
display: flex;
justify-content: center;
}
.a{
position: relative;
top: 250px;
width: 300px;
display: flex;
justify-content: center;
margin: 0 30px;
}
.c,.b{
font: 900 100px '';
line-height: 150px;
position: absolute;
color: brown;
top: 0;
transition: .4s;
}
.c{
clip-path: inset(49% 0 0 0);
}
.b{
clip-path: inset(1% 0 50% 0);
}
.a:hover .b,.a:hover .c{
top: calc(var(--i)*1px);
}
.a:hover .d{
opacity: 1;
}
.d{
text-decoration: none;
color: cyan;
font: 600 30px '';
line-height: 150px;
opacity: 0;
transition: .3s;
}
</style>
</head>
<body>
<div class="a">
<div class="b" style="--i:-30">BALD</div>
<div class="c" style="--i:30">BALD</div>
<a href="#" class="d">点赞/Fabulous</a>
</div>
<div class="a">
<div class="b" style="--i:-30">CHEN</div>
<div class="c" style="--i:30">CHEN</div>
<a href="#" class="d">关注/follow</a>
</div>
<div class="a">
<div class="b" style="--i:-30">GOAT</div>
<div class="c" style="--i:30">GOAT</div>
<a href="#" class="d">收藏/Collection</a>
</div>
</body>
