无聊练习的css动画效果
1.效果展示![](https://i-blog.csdnimg.cn/blog_migrate/a754f3892316c21883ae6440627c5c2d.gif)
2.html代码
<div class="wrap">
<div class="door-l">
</div>
<div class="door-r">
</div>
</div>
3.css代码
.wrap {
width: 470px;
height: 270px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* transform:translate 实现垂直居中 */
background: url("images/hzw.jpg");
perspective:1000px; /* 加上视距效果,可展现3d效果 */
}
.wrap:hover .door-l{
transform: rotateY(-130deg);
}
.wrap:hover .door-r{