您的位置：首页 > Web前端 > > 正文

css3特性动画图（CSS3+DIV实现漂亮的动画彩色标签）

更多 时间：2022-01-15 01:55:28 类别：Web前端 浏览量：575

css3特性动画图

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

先看看效果图：

css3特性动画图（CSS3+DIV实现漂亮的动画彩色标签）

  • CSS Code复制内容到剪贴板
    1. <style>   
    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. </style>   
    32.   
    33. <li class="dict">   
    34.   
    35.     <p class="pcolor">   
    36.   
    37.         <a href="#">html</a>   
    38.   
    39.         <a href="#">css3</a>   
    40.   
    41.         <a href="#">网站模版</a>   
    42.   
    43.         <a href="#">个人博客模版</a>   
    44.   
    45.         <a href="#">扁平化</a>   
    46.   
    47.         <a href="#">li+css</a>   
    48.   
    49.         <a href="#">bootstrap</a>   
    50.   
    51.         <a href="#">企业模版</a>   
    52.   
    53.         <a href="#">古典/文化</a>   
    54.   
    55.         <a href="#">婚纱摄影</a>   
    56.   
    57.         <a href="#">爱情</a>   
    58.   
    59.         <a href="#">jquery</a>   
    60.   
    61.     </p>   
    62.   
    63. </li>   
    • 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

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

    标签：CSS3 DIV 标签
  • 上一篇：python 怎么解析中文（Python中一般处理中文的几种方法）
  • 下一篇：phpstudy服务器怎么设置（PHPStudy打开网页很慢的原因及解决方案）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利