CSS transform属性有许多效果，平移、旋转、缩放等。
这里简单应用平移效果，实现双开门动画，以下为效果图。
<!--写一个div标签，以容纳背景图-->
<body>
<div class="box"> </div>
</body>/*清除以下默认属性，不清楚也没关系*/
* {
margin: 0;
padding: 0;
}
.box {
margin: 50px auto; /*设置标签居中*/
height: 600px;
width: 1000px;
background-size: 1000px; /*背景图宽度缩放与标签宽度一样，以铺满标签*/
background-image: url(images/pik_lightning.jpg); /*设置隐藏的底图*/
overflow: hidden; /*当封面图溢出标签时隐藏*/
}使用伪元素 before, after 创建两扇“门”
.box::before,
.box::after {
content: '';
float: left; /*让两扇“门”脱标，左浮动成一排*/
width: 50%; /*每扇“门”占父容器的50%*/
height: 600px;
background-size: 1000px; /*“门”的高度与底图高度一致*/
background-image: url(images/pik_poster.jpg);
transition: all 1s; /*设置“门”的平移动画*/
}
.box::after {
background-position: right 0; /*使右扇门定位到父容器的右边*/
}
/*利用伪类:hover 鼠标悬停时，触发两扇“门”的平移*/
.box:hover::before {
transform: translateX(-100%); /*左扇门向左移*/
}
.box:hover::after {
transform: translateX(100%); /*右扇门向右移*/
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双开门效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
margin: 50px auto;
height: 600px;
width: 1000px;
background-size: 1000px;
background-image: url(images/pik_lightning.jpg);
overflow: hidden;
}
.box::before,
.box::after {
content: '';
float: left;
width: 50%;
height: 600px;
background-size: 1000px;
background-image: url(images/pik_poster.jpg);
transition: all 1s;
}
.box::after {
background-position: right 0;
}
.box:hover::before {
transform: translateX(-100%);
}
.box:hover::after {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>