03/8
2017
今天排版时有一个四方块列表，效果是当鼠标放上去时方块会四散开来（其实效果图也是我做的）。于是我用css3动画做了效果出来。
布局时大量使用定位，以方便元素做位置变化。使用伪元素做了线条，感觉挺好用~
代码html部分：
<div class="wrap"> <ul class="content"> <li class="list"> <a href="/tag/%e7%a6%8f%e5%88%a9">福利</a> </li> <li class="list"> <a href="/music">音乐</a> </li> <li class="list"> <a href="/about">关于</a> </li> <li class="list"> <a href="/donation">塞☆钱</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;}
ps：这个代码高亮插件好像有问题啊，坑
