使用css的平移属性可以实现如下图的开门效果
首先html结构为一个大的div包裹两个等高等宽的小div
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
给大盒子设置宽高,插入背景图片,并将盒子居中
.box {
width: 1336px;
height: 600px;
background: url(../images/bg.jpg) no-repeat;
background-size: contain;
margin: 100px auto;
}
给两个盒子加浮动,并设置宽高,插入背景图,left为在左边平分显示,right为在右边平分显示
.box>div {
float: left;
transition: all 1s;
}
.left {
width: 50%;
height: 600px;
background: url(../images/fm.jpg) left;
}
.right {
width: 50%;
height: 600px;
background: url(../images/fm.jpg) right;
}
因为鼠标经过效果加上hover伪类效果(因为左边盒子向左水平所以设置负值)
.box:hover .left {
transform: translateX(-100%);
}
.box:hover .right {
transform: translateX(100%);
}
最后给大盒子加上溢出隐藏
.box {
width: 1336px;
height: 600px;
background: url(../images/bg.jpg) no-repeat;
background-size: contain;
margin: 100px auto;
overflow: hidden;
}
大功告成!