九格宫

九格宫的自作发有点渣渣可以参考 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{ 154px;
          height: 153px;
          border: solid 2px darkblue;
           margin: 20px auto;
           position: relative;
           text-align: center;
           }
          #Div a img{ 50px;
          height: 50px;
         display: block;
         float: left;
         left: 9999px;//关键的
         top: 51px;
         position: absolute;
          }
          #Div a{
             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; 50px;left:51px;top: 51px;
             height: 50px;}
    </style>
    </head>
    <body>
    
       <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>
    
    </body>
    </html>