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

秋天到了,枫树最引人注目了,她们的叶子都红了,一阵风吹过许多叶子就纷纷落了下来,飘在半空中像红色的蝴蝶一样在天空中飞舞,又好像是蝴蝶仙子下凡。

先看看效果图:

CSS Code复制内容到剪贴板
  1. <style>
  2. .dict{margin:20px0;clear:both;text-align:left;font-size:12px;}
  3. .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;}
  4. .dicta{color:#FFF;text-decoration:none}
  5. .dicta:hover{border-radius:0;text-shadow:#0001px1px1px}
  6. .dict.pcolora:nth-child(8n-7){background:#8A9B0F}
  7. .dict.pcolora:nth-child(8n-6){background:#EB6841}
  8. .dict.pcolora:nth-child(8n-5){background:#3FB8AF}
  9. .dict.pcolora:nth-child(8n-4){background:#FE4365}
  10. .dict.pcolora:nth-child(8n-3){background:#FC9D9A}
  11. .dict.pcolora:nth-child(8n-2){background:#EDC951}
  12. .dict.pcolora:nth-child(8n-1){background:#C8C8A9}
  13. .dict.pcolora:nth-child(8n){background:#83AF9B}
  14. .dict.pcolora:first-child{background:#036564}
  15. .dict.pcolora:last-child{background:#3299BB}
  16. </style>
  17. <divclass="dict">
  18. <pclass="pcolor">
  19. <arel="nofollow noopener noreferrer" href="#">html</a>
  20. <arel="nofollow noopener noreferrer" href="#">css3</a>
  21. <arel="nofollow noopener noreferrer" href="#">网站模版</a>
  22. <arel="nofollow noopener noreferrer" href="#">个人博客模版</a>
  23. <arel="nofollow noopener noreferrer" href="#">扁平化</a>
  24. <arel="nofollow noopener noreferrer" href="#">div+css</a>
  25. <arel="nofollow noopener noreferrer" href="#">bootstrap</a>
  26. <arel="nofollow noopener noreferrer" href="#">企业模版</a>
  27. <arel="nofollow noopener noreferrer" href="#">古典/文化</a>
  28. <arel="nofollow noopener noreferrer" href="#">婚纱摄影</a>
  29. <arel="nofollow noopener noreferrer" href="#">爱情</a>
  30. <arel="nofollow noopener noreferrer" href="#">jquery</a>
  31. </p>
  32. </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

原文链接:http://www.cnblogs.com/cssteach/archive/2016/06/16/5590375.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例