一、效果
鼠标滑过，门会打开，展示里面的内容
二、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
perspective: 1000px;
}
section {
width: 520px;
height: 280px;
border: 1px solid #000;
margin: 100px auto;
/* background: url(img/3.webp) no-repeat;
background-position: left center; */
position: relative;
/* overflow: hidden; */
}
.door-l,
.door-r {
width: 260px;
height: 280px;
background-color: pink;
position: absolute;
top: 0;
transition: all 0.8s;
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin:left ;
}
.door-r {
right: 0;
border-left: 1px solid #000;
transform-origin:right ;
}
.door-l::before {
content: "O";
position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
}
.door-r::before {
content: "O";
position: absolute;
top: 50%;
left: 2px;
transform: translateY(-50%);
}
section:hover .door-l {
transform: rotateY(-120deg);
}
section:hover .door-r {
transform: rotateY(120deg);
}
section img {
transition: all 0.8s;
}
section:hover img {
transform: rotateY(360deg);
}
</style>
</head>
<body>
<section>
<img src="img/3.webp" width="520px" height="280px"/>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
1062
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
