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

摘要：鼠标经过时，四个方块分别向外移动10像素。

效果是当鼠标放上去时方块会四散开来(其实效果图也是我做...

效果图：

鼠标经过时，四个方块分别向外移动10像素。

效果是当鼠标放上去时方块会四散开来(其实效果图也是我做的)

代码如下：

• 电台

• 镜子

• 听歌

• 微语

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;}

未经允许不得转载：作者:记磊博客，

转载或复制请以 超链接形式 并注明出处 轻刻年轮。