当前位置:记磊博客 > 技巧-源码 > 代码实用 > 正文

作者:记磊博客

比较忧愁,比较善感,比较孩子气,比较喜欢网络技术的小子

手机扫码查看

标签:

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

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

效果图:
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;}

记磊博客文章说明:

作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 记磊博客
原文地址:https://www.ly522.com/1057.html 发布于2018-06-26。
如果我的文章帮助到了你,或者给你产生了些许spark ,欢迎(-(赞助打赏)-)

您阅读这篇文章共花了: 0小时00分00秒
分享到:
赞(0) 打赏

评论-加入了一言 抢沙发

3 + 2 =


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

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

时光里的点滴

应广大网友需求记磊工具箱源码需求,开通交流群, 目前禁言。资源已经上传。群稳定后开放

快速加群

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录