设置父级背景图片
#实现双开门有两种方法1、采用定位 2、平面转换
#设置父级盒子的样式及背景
.box {
display: flex;
width: 1456px;
height: 816px;
margin: 0 auto;
background-image: url(./img/jhk-1723779336628.jpg);
overflow: hidden;
}
#平面转换效果及精灵盒子
.box .left,
.box .right {
width: 50%;
height: 816px;
background-image: url(./img/jhk-1723779330562.jpg);
transition: all 2s;
}
.box .right {
background-position: right 0;
}
.box:hover .left {
transform: translate(-100%);
}
.box:hover .right {
transform: translate(100%);
}
#鼠标滑过图片过度效果
