CSS hover实现多种块效果1
css有几种伪类是比较好用，可以简化我们的HTML代码 非常实际！
我们一般经常用的虚类就是：hover吧还有:after以及:befor这两种，你可以把它理解成一个隐藏的元素，需要的时候直接CSS设定属性让它出来，下面看看我用它实现的多种效果，很实际哦。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
*{
margin:0px;
padding: 0px;
}
.main{
width: 700px;
height: 800px;
margin:0 auto;
}
.main ul li{
float: left;
width: 200px;
height: 120px;
margin:10px;
list-style: none;
position: relative;
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
.main ul li img{
width: 100%;
height: 100%;
} .main .mask,ul li:before{
content:"";
position: absolute;
width: 100%;
height: 100%;
opacity: 0.6;
cursor: pointer;
background-color: rgb(0, 0, 0);
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
.main ul li:hover{
-webkit-transform: scale(1.2);
-webkit-box-shadow:0px 0px 30px #ccc;
-ms-transform: scale(1.2);
-ms-box-shadow:0px 0px 30px #ccc;
-moz-transform: scale(1.2);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform: scale(1.2);
-o-box-shadow:0px 0px 30px #ccc;
}
.img-1:hover:before{
height: 0%;
}
.img-2:hover:before{
height: 0%;
margin-top:60px;
}
.img-3:before{
opacity: 0;
display: none;
}
.img-3 .mask3{
width: 50%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
opacity: 0.6;
cursor: pointer;
background-color: rgb(0, 0, 0);
}
.img-3 .mask4{
width: 50%;
margin-left: 100px;
position: absolute;
top: 0px;
height: 100%;
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
opacity: 0.6;
cursor: pointer;
background-color: rgb(0, 0, 0);
}
.img-3:hover .mask3{
width:0%;
}
.img-3:hover .mask4{
margin-left: 200px;
width:0%;
}
.img-4:hover:before{
height: 0%;
width: 0%;
margin-top:60px;
margin-left: 100px;
}
.img-5:hover:before{
height: 0%;
width: 0%;
margin-top:60px;
margin-left: 100px;
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
}
.img-6:hover:before{
height: 0%;
width: 0%;
margin-top:60px;
margin-left: 100px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="main">
<ul>
<li class="img-1"> <!--用class控制-->
<!-- <div class="mask"></div>-->
<img src="img/111.jpg" alt="">
</li>
<li class="img-2">
<!-- <div class="mask"></div>-->
<img src="img/222.jpg" alt="">
</li>
<li class="img-3">
<div class="mask3"></div>
<div class="mask4"></div>
<img src="img/333.jpg" alt="">
</li>
<li class="img-4">
<!-- <div class="mask"></div>-->
<img src="img/444.jpg" alt="">
</li>
<li class="img-5">
<!-- <div class="mask"></div>-->
<img src="img/5555.jpg" alt="">
</li>
<li class="img-6">
<!-- <div class="mask"></div>-->
<img src="img/6666.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
.main .mask,ul li:before{
content:"";
position: absolute;
width: 100%;
height: 100%;
opacity: 0.6;
cursor: pointer;
background-color: rgb(0, 0, 0);
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
}
.main ul li:hover{
-webkit-transform: scale(1.2);
-webkit-box-shadow:0px 0px 30px #ccc;
-ms-transform: scale(1.2);
-ms-box-shadow:0px 0px 30px #ccc;
-moz-transform: scale(1.2);
-moz-box-shadow:0px 0px 30px #ccc;
-o-transform: scale(1.2);
-o-box-shadow:0px 0px 30px #ccc;
}
.img-1:hover:before{
height: 0%;
}
.img-2:hover:before{
height: 0%;
margin-top:60px;
}
.img-3:before{
opacity: 0;
display: none;
}
.img-3 .mask3{
width: 50%;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
opacity: 0.6;
cursor: pointer;
background-color: rgb(0, 0, 0);
}
.img-3 .mask4{
width: 50%;
margin-left: 100px;
position: absolute;
top: 0px;
height: 100%;
-webkit-transition-duration: 0.5s;
-ms-transition-duration:0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration:0.5s;
opacity: 0.6;
cursor: pointer;
background-color: rgb(0, 0, 0);
}
.img-3:hover .mask3{
width:0%;
}
.img-3:hover .mask4{
margin-left: 200px;
width:0%;
}
.img-4:hover:before{
height: 0%;
width: 0%;
margin-top:60px;
margin-left: 100px;
}
.img-5:hover:before{
height: 0%;
width: 0%;
margin-top:60px;
margin-left: 100px;
-webkit-transform: rotateX(360deg);
-moz-transform: rotateX(360deg);
-o-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
}
.img-6:hover:before{
height: 0%;
width: 0%;
margin-top:60px;
margin-left: 100px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="main">
<ul>
<li class="img-1"> <!--用class控制-->
<!-- <div class="mask"></div>-->
<img src="img/111.jpg" alt="">
</li>
<li class="img-2">
<!-- <div class="mask"></div>-->
<img src="img/222.jpg" alt="">
</li>
<li class="img-3">
<div class="mask3"></div>
<div class="mask4"></div>
<img src="img/333.jpg" alt="">
</li>
<li class="img-4">
<!-- <div class="mask"></div>-->
<img src="img/444.jpg" alt="">
</li>
<li class="img-5">
<!-- <div class="mask"></div>-->
<img src="img/5555.jpg" alt="">
</li>
<li class="img-6">
<!-- <div class="mask"></div>-->
<img src="img/6666.jpg" alt="">
</li>
</ul>
</div>
</body>
</html>
