九格宫

   九格宫的自作发  有点渣渣  可以参考   2016-01-12   22:47:38

<!DOCTYPE >
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta name=”keywords” content=”css3特效,炫酷九宫格特效,css3动画,鼠标滑过图片翻转特效,div css,:hover,transition”>
    <style type=”text/css”>
    *{ margin: 0px; padding: 0px;}
          #Div{ width: 154px;
          height: 153px;
          border: solid 2px darkblue;
           margin: 20px auto;
           position: relative;
           text-align: center;
           }
          #Div a img{ width: 50px;
          height: 50px;
         display: block;
         float: left;
         left: 9999px;//关键的
         top: 51px;
         position: absolute;
          }
          #Div a{
              width: 50px;
              height: 50px;
              margin: 0 1px 1px 0;
              background:blueviolet;
              text-decoration: none;
              line-height: 50px;
              display: block;//关键的
              float: left;
          }
          #Div a:hover img {left: 51px;}
           #Div a:hover{ background: darkgreen;}
           #Div #IMG{ float: left; width: 50px;left:51px;top: 51px;
              height: 50px;}
    </style>
    </head>
    <body>
    <!–纯css实现炫酷九宫格特效–>
       <div id=”Div”>
           <a href=”#”><img src=”img/1.jpg” alt=”1″/>1</a>
           <a href=”#”><img src=”img/2.jpg” alt=”1″/>2</a>
           <a href=”#”><img src=”img/3.jpg” alt=”1″/>3</a>
           <a href=”#”><img src=”img/4.jpg” alt=”1″/>4</a>
         <img src=”img/1.jpg” alt=”1″ id=”IMG”/>
           <a href=”#”><img src=”img/2.jpg” alt=”1″/>6</a>
           <a href=”#”><img src=”img/3.jpg” alt=”1″/>7</a>
           <a href=”#”><img src=”img/4.jpg” alt=”1″/>8</a>
           <a href=”#”><img src=”img/2.jpg” alt=”1″/>9</a>
           
       </div>
    <!–end–>
    </body>
    </html>

0 条评论
发表一条评论