学习目标:
wed移动端样式学习学习内容:
实现双开门效果: HTML效果<div class="box"></div>
css效果:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
width: 1366px;
height: 600px;
background-color: orange;
margin: 50px auto;
background: url(./images/bg.jpg);
overflow: hidden;
}
.box::after,::before {
content: "";
float: left;
width: 50%;
height: 100%;
background: url(./images/fm.jpg);
transition: all 1s;
}
.box::after {
background: url(./images/fm.jpg) right;
}
.box:hover::after{
transform: translate(100%);
}
.box:hover::before{
transform: translate(-100%);
}