实现开门效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
1.通过伪元素before,after设置两个50%宽度的盒子
2.通过设置背景图片位置控制图片展示
3.通过hover控制transform效果
4.通过transition控制过渡动画
5.通过设置父元素overflow: hidden隐藏多余部分
*/
.box {
width: 1366px;
height: 600px;
background: url(images/bg.jpg);
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box::after,
.box::before {
content: '';
float: left;
width: 50%;
height: 600px;
background: url(images/fm.jpg);
transition: all .5s;
}
.box::after {
background-position: right 0;
}
.box:hover::before {
transform: translate(-100%);
}
.box:hover::after {
transform: translate(100%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
通过display:inline-block实现的话,要注意间隙问题
.box::after,
.box::before {
content: '';
display: inline-block;
/* float: left; */
/*
为什么设置width,height测试的时候盒子没有出来?
因为伪元素模式是行内元素
方法一:display: inline-block
会有间隙问题导致换行,间隙问题通过设置父类font-size: 0解决
方法二:float: left
display: inline-block与float: left区别
float脱离文档流,行内元素也可以像块级元素设置宽高,父元素高度塌陷
display: inline-block不会脱离文档流,行内元素也可以像块级元素设置宽高,父元素高度不会塌陷
总结:当只是横向布局的时候,使用display: inline-block即可,布局不会乱,当有文字/图片环绕时用float更灵活
*/
width: 50%;
height: 600px;
background: url(images/fm.jpg);
transition: all .5s;
}