纯css实现炫酷九宫格特效

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-12-31 09:21:11　-　阅:　-　评:1　-　积分:0

乍看标题是不是有种似曾相识的感觉？九宫格，这个不是淘宝里面经常用到的轮播特效么？确实如此。不过，在淘宝里面我们都调用的是官方的Widget组件来实现此类特效。就在今天，我们再来发散下思维，用纯css来实现这种炫酷特效。

你激动了么？还是先上一张图片看下九宫格特效是什么样的吧。
纯css做的九宫格特效

好了，九宫格特效大致就长这个样子，由3*3=9个方格组成，故：艺灵称之为九宫格特效。效果分析：这个九宫格跟淘宝中的一样，鼠标滑过数字1-8时，中间的图片会切换成相对应的图片。

上面已经分析完了效果，下面我们就来用代码实现效果。既然是鼠标滑过切换成对应的图片，那么:hover属性是必不可少的了。废话不多说，开始写码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现炫酷九宫格特效--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="css3特效,炫酷九宫格特效,css3动画,鼠标滑过图片翻转特效,div css,:hover,transition">
<style type="text/css">
*{margin:0;padding:0}
.ylsj-9gg{position:relative;width:157px;height:153px;margin:50px auto;text-align:left;background-color:#fff}
.ylsj-9gg a{display:block;float:left;width:50px;height:50px;margin:0 1px 1px 0;line-height:50px;text-decoration:none;text-align:center;background-color:#949e7c;color:#fff;cursor:pointer}
.ylsj-9gg a img{position:absolute;left:-9999px;top:51px;}
.ylsj-9gg a:hover{background:#d4d8bd;color:#000;}
.ylsj-9gg a:hover img{left:51px;border:0}
.ylsj-9gg .img0{float:left;margin:0 1px 1px 0}
</style>
</head>
<body>
<!--纯css实现炫酷九宫格特效-->
<div class="ylsj-9gg">
<a>1<img src="http://www.yilingsj.com/d/file/div/2014-12-31/1.gif" title="boy" alt="boy"></a>
<a>2<img src="http://www.yilingsj.com/d/file/div/2014-12-31/2.gif" title="eyeye" alt="eyeye"></a>
<a>3<img src="http://www.yilingsj.com/d/file/div/2014-12-31/3.png" title="Queen" alt="Queen"></a>
<a>4<img src="http://www.yilingsj.com/d/file/div/2014-12-31/4.gif" title="A picture by Mondriaan" alt="A picture by Mondriaan"></a>
<img src="http://www.yilingsj.com/d/file/div/2014-12-31/0.png" title="Freddie mercury" alt="Freddie mercury" class="img0" >
<a>5<img src="http://www.yilingsj.com/d/file/div/2014-12-31/5.gif" title="A pussy cat" alt="A pussy cat"></a>
<a>6<img src="http://www.yilingsj.com/d/file/div/2014-12-31/6.gif" title="Black and White" alt="Black and White"></a>
<a>7<img src="http://www.yilingsj.com/d/file/div/2014-12-31/7.gif" title="My animation" alt="My animation"></a>
<a>8<img src="http://www.yilingsj.com/d/file/div/2014-12-31/8.gif" title="Spooky" alt="Spooky"></a>
</div>
<!--end-->
</body>
</html>

点击上面的“运行代码”后，我们可以在新页面中看到最终的效果。但是这个是css2做的，鼠标滑过时换图没有过渡效果。为了让效果更加完美，这个时候我们可以使用上css3中的过渡属性，即：transition。当然了，你还可以添加css3中的2D变换或3D变换或者是css2中的透明属性让这个九宫格更加炫酷。例如：scale; rotate; opacity等等。不过特效越多时，需要考虑的东西也就越多，代码也就要修改的越多。下面以背景色为例，鼠标滑过时背景色有过渡效果。新增代码如下：

.ylsj-9gg a{-webkit-transition: .5s ease-in;transition: .5s ease-in;}

点此下载→→【div+css】纯css做的九宫格特效.zip　　　

抛砖引玉完毕，大家自由发挥吧。

注：本文为阅读参考资料：Avatar Parade后整理而成。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-12-31/238.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！