案例-开门效果CSS3
Posted qtbb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了案例-开门效果CSS3相关的知识，希望对你有一定的参考价值。
<style>
.door
width: 288px;
height: 153px;
border: 2px solid #333;
margin: 150px auto;
background: url(../img/01.png) no-repeat;
position: relative;
perspective: 500px; /* 设置盒子透明 */
.door-l,
.door-r
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: pink;
transition:all 1s; /* 盒子过渡效果 */
.door-r
right: 0;
border-left: 2px solid #333;
transform-origin:right; /* 设置盒子沿right边旋转 */
.door-l
left: 0;
border-right: 2px solid #333;
transform-origin:left; /* 设置盒子沿left边旋转 */
.door-l::before,
.door-r::before
content: "";
position: absolute;
top:50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform:translateY(-50%); /* 设置盒子垂直方向 */
.door-r::before
left:5px;
.door-l::before
right:5px; /* 设置门扣的位置 */
.door:hover .door-l
transform:rotateY(-130deg);
.door:hover .door-r
transform:rotateY(130deg); /* 设置门沿Y轴旋转的角度 */
</style>
</head>
<body>
<div class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
以上是关于案例-开门效果CSS3的主要内容，如果未能解决你的问题，请参考以下文章