开门大吉效果的实现的原理
- 使用
css3
中的rotate
属性实现旋转效果 - 使用
css3
中的transform-origin
属性实现门开的效果
一、HTML
页面布局代码
<section>
<div class="door-left">
</div>
<div class="door-right">
</div>
</section>
复制代码
二、CSS
样式代码
实现左右两扇门的效果,主要使用的是定位的方式,把两扇门定位的左右两边。 旋转的关键效果,鼠标经过盒子时,rotateY
旋转即可实现开门效果。
section {
position: relative;
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100 auto;
background: url(../img/animal.jpg) no-repeat;
background-size: 100% 100%;
perspective: 1000px; // 给父盒子添加透视效果,使其具有立体效果
}
.door-left,.door-right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: url(./door.jpg) no-repeat;
background-size: 100% 100%;
transition: all 1s; // 实现动画效果
}
.door-left {
left: 0;
border-right: 1px solid #000;
transform-origin: left; // 左侧盒子,按左边翻转
}
.door-right {
right: 0;
border-left: 1px solid #000;
transform-origin: right; // 右侧盒子,按右边翻转
}
<!---->伪元素设置开门的把手
.door-left::before {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); // 设置把手垂直居中
}
.door-right::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); // 设置把手垂直居中
}
section:hover .door-left {
transform: rotateY(-130deg);
}
section:hover .door-right {
transform: rotateY(130deg);
}
复制代码