css3动画制作的列表扩散效果代码四方格效果

效果图：

鼠标经过时，四个方块分别向外移动10像素。
效果是当鼠标放上去时方块会四散开来（其实效果图也是我做的）

代码如下：

<div class="wrap">
<ul class="content">
<li class="list">
<a href="/category/diantai">电台</a>
</li>
<li class="list">
<a href="http://tools.ly522.com/mirror/">镜子</a>
</li>
<li class="list">
<a href="https://tools.ly522.com/Tools/music/">听歌</a>
</li>
<li class="list">
<a href="/wy">微语</a>
</li>
</ul>
</div>

css部分：

/*重置样式*/
ol,ul,li{margin:0; padding:0;}
li{list-style: none;}
body{margin: 0;font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;}
/*外层布局*/
.wrap{background: #EEEEEE;padding: 30px 0 40px;min-width: 640px;}
/*列表容器设置相对定位*/
.wrap .content{position: relative;width: 560px;z-index: 0;height: 400px;margin:0 auto;}
/*用伪元素绝对定位，做出两条线，并设置为垂直居中、水平居中（居中是方便从中间向四周延伸）*/
.wrap .content::before{content:"";position: absolute;z-index: 2;width: 560px;height: 1px;background: #ddd;left: 50%;margin-left: -280px;top: 50%;transition: all .4s ease-out;}
.wrap .content::after{content:"";position: absolute;z-index: 2;height: 400px;width: 1px;background: #ddd;left: 50%;top: 50%;margin-top: -200px;transition: all .4s ease-out;}
/*当鼠标经过列表容器时，使两条横线变长（分别增加了宽度、高度）*/
.wrap .content:hover::before{width:580px;margin-left: -290px;}
.wrap .content:hover::after{height:420px;margin-top: -210px;}
/*用绝对定位设置四个列表的位置*/
.wrap .content .list{position: absolute;z-index: 1;width: 280px;height: 200px;background: #fff;text-align: center;line-height: 200px;transition: all .4s ease-out;}
.wrap .content .list:nth-child(1){left: 0;top: 0;}
.wrap .content .list:nth-child(2){left: 280px;top: 0;}
.wrap .content .list:nth-child(3){left: 0;top: 200px;}
.wrap .content .list:nth-child(4){left: 280px;top: 200px;}
/*当鼠标经过列表容器时，在四个列表相邻的部分添加margin，使其从中间向四周扩散（不改变宽高）*/
.wrap .content:hover .list{margin: 10px;background: #0C73D7;box-shadow: 0px 1px 10px rgba(0,0,0,.3)}
/*要使元素形成扩散的效果，还需要移动其4个顶点的位置*/
.wrap .content:hover .list:nth-child(1){margin-top: -10px;margin-left: -10px;}
.wrap .content:hover .list:nth-child(2){margin-top: -10px;margin-left: 10px;}
.wrap .content:hover .list:nth-child(3){margin-top: 10px;margin-left: -10px;}
.wrap .content:hover .list:nth-child(4){margin-top: 10px;margin-left: 10px;}
/*设置链接文字样式及变色*/
.wrap .content .list a{font-size: 28px;color: #333;text-decoration: none;display: block;width: 100%;height: 100%;transition: all .3s ease 0s;}
.wrap .content:hover a{color: #fff;}