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>




   







            

            
posted @ 
2014-05-13 15:29 
独孤残情 
阅读(345) 
评论(0) 
 
收藏 
举报