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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
html如何对span设置宽度
Oct 30 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 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
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php设计模式 Proxy (代理模式)
2011/06/26 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js获取class的所有元素
2013/03/28 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
js格式化时间的方法
2015/12/18 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue实现选中效果
2020/10/07 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[19:15]DK战队纪录片
2014/09/02 DOTA
python杀死一个线程的方法
2015/09/06 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
this关键字的作用
2016/01/30 面试题
职称自我鉴定
2013/10/15 职场文书
中专自我鉴定范文
2013/10/16 职场文书
化验室岗位职责
2015/02/14 职场文书