九格宫的自作发 有点渣渣 可以参考 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>
<!--纯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>