CSS3实现的鼠标悬浮开门关门效果代码实例:
本章节分享一段代码实例，它利用CSS3模拟实现了简单的开门关门效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.door{
position:relative;
width:400px;
height:300px;
overflow:hidden;
border:2px solid #000;
background:#000;
}
.door:before,.door:after{
content:‘‘;
position:absolute;
left:0;
width:0;
height:0;
overflow:hidden;
border-color:#000 transparent transparent transparent;
border-style:solid;
border-width:0 200px;
z-index:2;
transition:all .8s ease;
}
.door:before{top:0;}
.door:after{
bottom:0;
border-color:transparent transparent #000 transparent;
}
.door:hover:before,.door:hover:after{border-width:40px 200px;}
.door-left, .door-right{
position:relative;
float:left;
width:50%;
height:100%;
background:#f00;
box-sizing:border-box;
transition:all .5s ease;
}
.door-left{
border-right:2px solid #000;
-webkit-transform-origin:0 0;
}
.door-left:before,.door-right:before{
content:‘‘;
position:absolute;
width:10px;
height:10px;
top:50%;
margin-top:-5px;
border-radius:50%;
background:#000;
}
.door-left:before{right:5px;}
.door-right:before{left:5px;}
.door-right{
border-left:2px solid #000;
-webkit-transform-origin:100% 0;
}
.door:hover .door-left{
-webkit-transform:rotateY(-90deg);
transition:all .8s ease-out;
}
.door:hover .door-right{
-webkit-transform:rotateY(90deg);
transition:all .8s ease-out;
}
</style>
</head>
<body>
<div class="door">
<div class="door-left"></div>
<div class="door-right"></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，代码根本无需过多介绍，只需要明白各个属性的原理就可以了。
相关阅读:
（1）.border-color属性可以参阅css3的border-color用法详解一章节。
（2）.transition可以参阅CSS3的transition属性详解一章节。
（3）.:before可以参阅CSS的伪对象选择符before/E::before一章节。
（4）.border-radius可以参阅CSS3实现圆角效果一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18180
更多内容可以参阅:http://www.softwhy.com/divcss/
时间： 2024-08-03 20:04:13