这篇文章主要给大家讲述CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以跟随中国E盟技术频道的小编一起来参考一下。
先看看效果图:
CSS Code复制内容到剪贴板
- .dict{margin:20px0;clear:both;text-align:left;font-size:12px;}
- .dicta{line-height:24px;height:24px;display:inline-block;background:#fff;padding:3px11px;margin:10px5px00;border-radius:8px;-moz-transition:all0.5s;-webkit-transition:all0.5s;-o-transition:all0.5s;transition:all0.5s;}
- .dicta{color:#FFF;text-decoration:none}
- .dicta:hover{border-radius:0;text-shadow:#0001px1px1px}
- .dict.pcolora:nth-child(8n-7){background:#8A9B0F}
- .dict.pcolora:nth-child(8n-6){background:#EB6841}
- .dict.pcolora:nth-child(8n-5){background:#3FB8AF}
- .dict.pcolora:nth-child(8n-4){background:#FE4365}
- .dict.pcolora:nth-child(8n-3){background:#FC9D9A}
- .dict.pcolora:nth-child(8n-2){background:#EDC951}
- .dict.pcolora:nth-child(8n-1){background:#C8C8A9}
- .dict.pcolora:nth-child(8n){background:#83AF9B}
- .dict.pcolora:first-child{background:#036564}
- .dict.pcolora:last-child{background:#3299BB}
- "dict">class=
"pcolor">
class=- "#">html >
- "#">css3 >
- "#">网站模版 >
- "#">个人博客模版 >
- "#">扁平化 >
- "#">div+css >
- "#">bootstrap >
- "#">企业模版 >
- "#">古典/文化 >
- "#">婚纱摄影 >
- "#">爱情 >
- "#">jquery >
以上就是CSS3+DIV实现漂亮的动画彩色标签的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中国E盟技术频道。