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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
Canvas实现保存图片到本地的示例代码
Jun 28 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 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
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
php微信公众号开发之简答题
2018/10/20 PHP
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
对Django中内置的User模型实例详解
2019/08/16 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
性能测试工程师的面试题
2015/02/20 面试题
专升本自我鉴定
2013/10/10 职场文书
致400米运动员广播稿
2014/02/07 职场文书
保密工作责任书
2014/04/16 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书