CSS3+DIV实现漂亮的动画彩色标签
发布时间:2016-06-16 16:56:07 作者:佚名 我要评论
这篇文章主要为大家详细介绍了CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以参考一下
先看看效果图:
CSS Code复制内容到剪贴板
- <style>
- .dict { margin: 20px 0;clear:both ;text-align:left;font-size:12px;}
- .dict a { line-height: 24px; height: 24px; display: inline-block; background: #fff; padding: 3px 11px; margin: 10px 5px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
- .dict a { color: #FFF;text-decoration:none }
- .dict a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }
- .dict .pcolor a:nth-child(8n-7) { background: #8A9B0F }
- .dict .pcolor a:nth-child(8n-6) { background: #EB6841 }
- .dict .pcolor a:nth-child(8n-5) { background: #3FB8AF }
- .dict .pcolor a:nth-child(8n-4) { background: #FE4365 }
- .dict .pcolor a:nth-child(8n-3) { background: #FC9D9A }
- .dict .pcolor a:nth-child(8n-2) { background: #EDC951 }
- .dict .pcolor a:nth-child(8n-1) { background: #C8C8A9 }
- .dict .pcolor a:nth-child(8n) { background: #83AF9B }
- .dict .pcolor a:first-child { background: #036564 }
- .dict .pcolor a:last-child { background: #3299BB }
- </style>
- <div class="dict">
- <p class="pcolor">
- <a href="#">html</a>
- <a href="#">css3</a>
- <a href="#">网站模版</a>
- <a href="#">个人博客模版</a>
- <a href="#">扁平化</a>
- <a href="#">div+css</a>
- <a href="#">bootstrap</a>
- <a href="#">企业模版</a>
- <a href="#">古典/文化</a>
- <a href="#">婚纱摄影</a>
- <a href="#">爱情</a>
- <a href="#">jquery</a>
- </p>
- </div>
原文链接:http://www.cnblogs.com/cssteach/archive/2016/06/16/5590375.html
相关文章
- 是一段实现了12中非常炫酷的表单浮动标签特效代码,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用2015-04-10
仅6个span标签实现的纯CSS3动态Loading加载特效源码
今天我们介绍一款实现超级简单的CSS3进度条动画,该进度条是条形进度条,仅用了6个span标签和相应的CSS3代码实现了该CSS3条形进度条。呈现出波浪滚动的效果。整体效果动感2014-10-31一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
一款超酷的js+css3实现的3D标签云特效,兼容ie7/8/9,看惯了flash的,来试试这个吧,下面有个不错的示例,希望大家不要错过2013-11-18jQuery+ajax+html5+css3等最新技术整合的Tab标签栏切换特效
一个功能非常完美的ajax tab切换效果,使用html5、css3,jquery等完成,彩色的tab标签2013-05-13- 用CSS3代码来写,非常简洁,无需图片配合,只要纯代码即可实现,还有更简洁的么2013-03-27
- 下面小编就为大家带来一篇CSS3的几个标签速记(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦2016-07-07
最新评论