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


Posted in HTML / CSS onJune 16, 2016

先看看效果图:

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

CSS Code复制内容到剪贴板
  1. <style>   
  2.   
  3. .dict { margin20px 0;clear:both ;text-align:left;font-size:12px;}   
  4.   
  5. .dict a { line-height24pxheight24pxdisplayinline-blockbackground#fffpadding3px 11pxmargin10px 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. <div 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="#">div+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. </div>   
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

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

HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
CSS3实现多背景模拟动态边框的效果
Nov 08 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 #HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 #HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 #HTML / CSS
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 #HTML / CSS
CSS3弹性伸缩布局之box布局
Jul 12 #HTML / CSS
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 #HTML / CSS
You might like
基于jQuery的获取标签名的代码
2012/07/16 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
React组件的三种写法总结
2017/01/12 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
js读取本地文件的实例
2017/12/22 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
js prototype和__proto__的关系是什么
2019/08/23 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
Python实现DDos攻击实例详解
2019/02/02 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
文言文形式的学生求职信
2013/12/03 职场文书
小学语文业务学习材料
2014/06/02 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
python获取对象信息的实例详解
2021/07/07 Python
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS