CSS3+DIV实现漂亮的动画彩色标签

这篇文章主要给大家讲述CSS3+DIV实现漂亮的动画彩色标签,鼠标移动会有动画 ,很神奇的动画效果,感兴趣的小伙伴们可以跟随中国E盟技术频道的小编一起来参考一下。

先看看效果图:

CSS Code复制内容到剪贴板
  1. .dict{margin:20px0;clear:both;text-align:left;font-size:12px;}
  2. .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;}
  3. .dicta{color:#FFF;text-decoration:none}
  4. .dicta:hover{border-radius:0;text-shadow:#0001px1px1px}
  5. .dict.pcolora:nth-child(8n-7){background:#8A9B0F}
  6. .dict.pcolora:nth-child(8n-6){background:#EB6841}
  7. .dict.pcolora:nth-child(8n-5){background:#3FB8AF}
  8. .dict.pcolora:nth-child(8n-4){background:#FE4365}
  9. .dict.pcolora:nth-child(8n-3){background:#FC9D9A}
  10. .dict.pcolora:nth-child(8n-2){background:#EDC951}
  11. .dict.pcolora:nth-child(8n-1){background:#C8C8A9}
  12. .dict.pcolora:nth-child(8n){background:#83AF9B}
  13. .dict.pcolora:first-child{background:#036564}
  14. .dict.pcolora:last-child{background:#3299BB}
  15. "dict">
    class=
  16. "pcolor">

    class=
  17. "#">html >
  18. "#">css3 >
  19. "#">网站模版 >
  20. "#">个人博客模版 >
  21. "#">扁平化 >
  22. "#">div+css >
  23. "#">bootstrap >
  24. "#">企业模版 >
  25. "#">古典/文化 >
  26. "#">婚纱摄影 >
  27. "#">爱情 >
  28. "#">jquery >

以上就是CSS3+DIV实现漂亮的动画彩色标签的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中国E盟技术频道。

    A+
发布日期:2019-09-20  所属分类:CSS
标签: