1.效果演示
CSS transform属性有许多效果,平移、旋转、缩放等。
这里简单应用平移效果,实现双开门动画,以下为效果图。
2.设计思路
- 设置一张居中的需要隐藏的底图。
- 设置封面图,平分成左右两部分。
- 鼠标悬浮在封面图上,触发“开门”效果。
3.代码详解
3.1 设置居中底图
<!--写一个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; /*当封面图溢出标签时隐藏*/
}
3.2 设置左右“门”
使用伪元素 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; /*使右扇门定位到父容器的右边*/
}
3.3. 设置鼠标触发
/*利用伪类:hover 鼠标悬停时,触发两扇“门”的平移*/
.box:hover::before {
transform: translateX(-100%); /*左扇门向左移*/
}
.box:hover::after {
transform: translateX(100%); /*右扇门向右移*/
}
4.源码展示
<!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>