<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双开门效果</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 布局 父子结构，父级是大图，子级左右是小图 */
.box{
display: flex;
margin: 0 auto;
width: 1366px;
height: 600px;
background-image: url("./img/bg.jpg");
/* 超出父级外的都要看不见，给父级加 overflow:hidden; */
overflow: hidden;
}
.box .left,
.box .right{
width: 50%;
height: 600px;
background-image: url("./img/fm.jpg");
transition: all 2s;
}
.box .right{
/* background-position: -683px 0; */
/* right表示取到精灵图右面的图片 */
background-position: right 0;
}
/* 鼠标悬停时左右移动 */
.box:hover .left{
transform: translateX(-100%);
}
.box:hover .right{
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
将图片放到对应的目录实现双开门效果
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
