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打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
使用phonegap查找联系人的实现方法
Mar 31 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
python 根据pid杀死相应进程的方法
2017/01/16 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
sklearn的predict_proba使用说明
2020/06/28 Python
python与pycharm有何区别
2020/07/01 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
建筑工程管理专业自荐信范文
2013/12/28 职场文书
横幅标语大全
2014/06/17 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2019各种承诺书范文
2019/06/24 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Golang bufio详细讲解
2022/04/21 Golang