1.首先是平移的效果。
效果解读：就是两扇门往两边移动，这样的效果比较容易制作。
开门前的效果图：
image.png
开门后的效果图：
image.png
看下列代码
<!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;
}
.father {
display: flex;
/* 为了使图片不变形，我这里的大小和图片大小一样 ，大家根据情况而定*/
width: 1920px;
height: 1080px;
margin: 0 auto;
/* 这里读者可以填自己的图片地址 */
background: url(R-C.jpg) no-repeat;
}
.father .left,
.father .right {
width: 50%;
height: 1080px;
/* 这里注意，其实开门图是一张图片，只是这里把它分开，在左右两个盒子中分别显示，可以理解为精灵图的做法 */
background: url(OIP-C.jpg) no-repeat;
background-size: 1920px 1080px;
transition: all .5s;
}
.father .right {
/* right 表示的取到精灵图右面的图片 */
background-position: right 0;
}
/* 2. 鼠标悬停的效果：左右移动 */
.father:hover .left {
transform: translate(-100%);
}
.father:hover .right {
transform: translateX(100%);
}
</style>
</head>
<body>
<div class="father">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
2.第二种方法是有一种推门的感觉，在这里 要用到第二种属性，叫做旋转
在这里读者简单的介绍一下旋转的使用。
旋转
transform: rotate(旋转角度);
-
取值：角度单位是 deg
-
技巧
-
取值正负均可
-
取值为正，顺时针旋转
-
取值为负，逆时针旋转
-
转换原点
默认情况下，转换原点是盒子中心点
transform-origin: 水平原点位置 垂直原点位置;
取值：
-
方位名词（left、top、right、bottom、center）
-
像素单位数值
-
百分比
因为读者没有录制GIF动态图，不好展示效果，大家可以复制代码，查看效果，谢谢。
<!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;
}
body {
perspective: 1000px;
}
.father {
display: flex;
/* 为了使图片不变形，我这里的大小和图片大小一样 ，大家根据情况而定*/
width: 1920px;
height: 1080px;
margin: 0 auto;
/* 这里读者可以填自己的图片地址 */
background: url(R-C.jpg) no-repeat;
}
.father .left,
.father .right {
width: 50%;
height: 1080px;
background: url(OIP-C.jpg) no-repeat;
background-size: 1920px 1080px;
transition: all .5s;
}
.father .right {
/* right 表示的取到精灵图右面的图片 */
background-position: right 0;
}
/* 2. 鼠标悬停的效果：左右移动 */
.father:hover .left {
transform-origin: left;
transform: rotateY(90deg);
}
.father:hover .right {
transform-origin: right;
transform: rotateY(90deg);
}
</style>
</head>
<body>
<div class="father">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
网友评论