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

时间：2021-05-08

先看看效果图：

CSS Code复制内容到剪贴板
  • <style>
  • .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}
  • </style>
  • <divclass="dict">
  • <pclass="pcolor">
  • <ahref="#">html</a>
  • <ahref="#">css3</a>
  • <ahref="#">网站模版</a>
  • <ahref="#">个人博客模版</a>
  • <ahref="#">扁平化</a>
  • <ahref="#">div+css</a>
  • <ahref="#">bootstrap</a>
  • <ahref="#">企业模版</a>
  • <ahref="#">古典/文化</a>
  • <ahref="#">婚纱摄影</a>
  • <ahref="#">爱情</a>
  • <ahref="#">jquery</a>
  • </p>
  • </div>
    • 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章