css3实现开门动画
css3实现开门动画效果
今天我们使⽤css3实现以下开门动画，⾸先我们来看⼀下效果图
接下来我们来实现⼀下这个效果
1. 先进⾏布局，布局的实现由很多种，这⾥我们需要position和float进⾏布局，⾸先先把门放到正中央，我们可以利⽤以下代码实现
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
2. 对于上述代码来说就是这样的
3. 下来就可以设置背景，设置左右门了，门的div和左右门的div是⽗⼦结构，我们只需要对左右门设置了左浮动，因为我们需要给左右门
的右边和左边设置边框，使其呈现门缝效果，因此我们需要把左右门设置成盒⼦模型即box-sizing:border-box
box-sizing:border-box;
float:left;
4. 接下来我们就需要给左右门设置旋转效果了，⾸先需要把左右门设置变形基准点，需要把左门的基准点设置为left center；右门设置为
基准点设置为right center
div.left_door{
transform-origin:left center;
border-right:1px solid rgb(8, 8, 8);
}
div.right_door{
transform-origin:right center;
border-left:1px solid rgb(8, 8, 8);
}
5. 下来就是当⿏标划过门的时候，左右门的y轴进⾏旋转实现开门效果
div.door:hover div.left_door{
transform:rotateY(-140deg);
}
div.door:hover div.right_door{
transform:rotateY(140deg);
}
6. 但是现在你会发现，它的旋转效果和我们预期的并不⼀样，这是因为我们看到的是⼀个3d呈现的效果，可是到现在我们并没有为其设
置过3d效果；因此我们好需要在门上设置⼀个属性，即perspective属性，这个属性是⽤来设置镜头(就好⽐我们的眼睛）距离元素平⾯的位置，它的显⽰⽅式是近⼤远⼩的显⽰⽅式；如果不清楚的⼩伙伴可以去⽹上查⼀下这个属性的解析过程。
7. ⾄此我们的效果就出现了，下⾯是源代码
* {
margin: 0;
padding: 0;
}
ul{
list-style-type:none;
}
/*门⾥⾯*/
div.door{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -150px;
background-image: url(img/武汉加油.jpg);
background-size:100% 100%;
perspective: 800px;
}
/*左门/右门*/
div.left_door,
div.right_door{
width:150px;
height:300px;
borderbox
background-color:crimson;
box-sizing:border-box;
float:left;
z-index: 1;
transition:all 2s ease;
}
div.left_door{
transform-origin:left center;
border-right:1px solid rgb(8, 8, 8);    }
div.right_door{
transform-origin:right center;
border-left:1px solid rgb(8, 8, 8);    }
/*门把⼿*/
div.left_door ul li,
div.right_door ul li{
width:50px;
height:50px;
border:2px solid #332211;
border-radius:50%;
}
div.left_door ul li,
div.right_door ul li{
margin-top:123px;
}
div.left_door ul li{
margin-left:96px;
}
/*使⽤css变形功能*/
div.door:hover div.left_door{
transform:rotateY(-140deg);        }
div.door:hover div.right_door{
transform:rotateY(140deg);
}
<div class="door">
<div class="left_door">
<ul>
<li></li>
</ul>
</div>
<div class="right_door">
<ul>
<li></li>
</ul>
</div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。