一:效果展示
关门效果:
开门效果:
二:html代码
<div id="a">
<div id="a1"></div>
<div id="a2"></div>
</div>
建立两个div存放门的图片
三:CSS代码
<style>
body {
/* 设置透视 */
perspective: 1000px;
}
#a {
width: 450px;
height: 300px;
margin: 300px auto;
position: relative;
background: url("images/syf.jpg");
/* 相对定位 */
position: relative;
}
#a1 {
background: url("images/bg.png");
width: 225px;
height: 300px;
transition: all 0.8s;
transform-origin: left;
/* 相对定位 */
position: relative;
}
#a2 {
background: url("images/bg.png");
width: 225px;
height: 300px;
/* 固定定位,相对于#a定位 */
position: absolute;
top: 0px;
left: 225px;
transition: all 0.8s;
transform-origin: right;
}
#a:hover #a1 {
/* 动画效果rotateY(-120deg):沿着Y逆时针轴旋转120度 */
transform: rotateY(-120deg);
}
#a:hover #a2 {
/* 动画效果rotateY(-120deg):沿着Y顺时针轴旋转120度 */
transform: rotateY(120deg);
}
/* 在#a1中建立伪类 */
#a1::after {
content: "";
width: 20px;
height: 20px;
border: 1px solid #000;
/* 画圆 */
border-radius: 50%;
/* 固定定位,相对于#a1定位 */
position: absolute;
top: 140px;
left: 173px;
}
/* 在#a2中建立伪类 */
#a2::after {
content: "";
width: 20px;
height: 20px;
border: 1px solid #000;
/* 画圆 */
border-radius: 50%;
/* 固定定位,相对于#a2定位 */
position: absolute;
top: 140px;
left: 28px;
}
</style>
代码基本都给了注册,如果有不会的可以留言,我帮你解答。