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

作者

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

先看看效果图：

CSS Code
复制内容到剪贴板
  1.   
  2.   
  3. .dict { margin: 20px 0;clear:both ;text-align:left;font-size:12px;}   
  4.   
  5. .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; }   
  6.   
  7. .dict a { color: #FFF;text-decoration:none }   
  8.   
  9. .dict a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }   
  10.   
  11. .dict .pcolor a:nth-child(8n-7) { background: #8A9B0F }   
  12.   
  13. .dict .pcolor a:nth-child(8n-6) { background: #EB6841 }   
  14.   
  15. .dict .pcolor a:nth-child(8n-5) { background: #3FB8AF }   
  16.   
  17. .dict .pcolor a:nth-child(8n-4) { background: #FE4365 }   
  18.   
  19. .dict .pcolor a:nth-child(8n-3) { background: #FC9D9A }   
  20.   
  21. .dict .pcolor a:nth-child(8n-2) { background: #EDC951 }   
  22.   
  23. .dict .pcolor a:nth-child(8n-1) { background: #C8C8A9 }   
  24.   
  25. .dict .pcolor a:nth-child(8n) { background: #83AF9B }   
  26.   
  27. .dict .pcolor a:first-child { background: #036564 }   
  28.   
  29. .dict .pcolor a:last-child { background: #3299BB }   
  30.   
  31.   
  32.   
  33. “dict”
    >   

     class=

  34.   
  35.     

    “pcolor”>   

     class=

  36.   
  37.         “#”>html     >
  38.   
  39.         “#”>css3     >
  40.   
  41.         “#”>网站模版     >
  42.   
  43.         “#”>个人博客模版     >
  44.   
  45.         “#”>扁平化     >
  46.   
  47.         “#”>div+css     >
  48.   
  49.         “#”>bootstrap     >
  50.   
  51.         “#”>企业模版     >
  52.   
  53.         “#”>古典/文化     >
  54.   
  55.         “#”>婚纱摄影     >
  56.   
  57.         “#”>爱情     >
  58.   
  59.         “#”>jquery     >
  60.   
  61.     

     

      

  62.   
  63.  

  

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