CSS3+DIV实现漂亮的动画彩色标签
来源:爱站网时间:2019-01-28编辑:网友分享
这篇文章主要给大家讲述CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以跟随爱站技术频道的小编一起来参考一下。
这篇文章主要给大家讲述CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以跟随爱站技术频道的小编一起来参考一下。
先看看效果图:
CSS Code复制内容到剪贴板
- .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 }
- "dict">class=
-
"pcolor">
class= - "#">html >
- "#">css3 >
- "#">网站模版 >
- "#">个人博客模版 >
- "#">扁平化 >
- "#">div+css >
- "#">bootstrap >
- "#">企业模版 >
- "#">古典/文化 >
- "#">婚纱摄影 >
- "#">爱情 >
- "#">jquery >
-
以上就是CSS3+DIV实现漂亮的动画彩色标签的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱站技术频道。
上一篇:CSS固定页面背景图像定位方法
下一篇:对CSS中盒子模型的深入理解