css3伪类nth-child结合transiton动画实现文字若影若现
收先创建一个div盒子，然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I,,J
先看下效果图：

看HTML5代码：

  1. <div class="box">
  2. <span>A</span>
  3. <span>B</span>
  4. <span>C</span>
  5. <span>D</span>
  6. <span>E</span>
  7. <span>F</span>
  8. <span>G</span>
  9. <span>H</span>
  10. <span>I</span>
  11. <span>J</span>
  12. </div>

复制代码

接下来给div添加一些css样式：

  1. .box {
  2. background-image: linear-gradient(135deg, #723362, #9d223c);
  3. color: #fff;
  4. padding: 1em 0;
  5. text-align: center;
  6. font-weight: 300;
  7. text-transform: uppercase;
  8. letter-spacing: .4em;
  9. padding-left: .4em;
  10. font-size: 1.8em;
  11. margin-top: 2.5rem
  12. }

复制代码

这里要说一点的就是linear-gradient(,,,)
共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。这里定义的是一个角度135度，第二个和第三个参数分别是起点颜色和终点颜色。
然后背景角色设置为#9d223c
文字为白色，且居中显示，文字加粗显示，其中text-transform: uppercase表示的是文字只以大写字母开头进行旋转，其它的一些就不用多说了都是常见的一些属性什么内边距外边距啊字体大小啊等等。

下面才是真正进入主题部分：
来看下面代码：

  1. .box1 span {opacity: 0;transition: opacity 1300ms}
  2. .box:hover span {opacity: 1}
  3. .box span:nth-child(1)  { transition-delay:  200ms }
  4. .box span:nth-child(2)  { transition-delay: 1200ms }
  5. .box span:nth-child(3)  { transition-delay:  800ms }
  6. .box span:nth-child(4)  { transition-delay:  300ms }
  7. .box span:nth-child(5)  { transition-delay:  700ms }
  8. .box span:nth-child(6)  { transition-delay:  600ms }
  9. .box span:nth-child(7)  { transition-delay:  400ms }
  10. .box span:nth-child(8)  { transition-delay:  900ms }
  11. .box span:nth-child(9)  { transition-delay:  700ms }
  12. .box span:nth-child(10) { transition-delay:   50ms }

复制代码

在设置完div的css样式后首先我们要给div下的span元素里的内容进行隐藏或者把他透明化，opacity:0表示的就是透明如果给他的值设置为1的话那就是不透明，当然你也可以设置为0.5或者0.3等等，opacity的值是0到1之间。
初始化设置透明为0后，在我们鼠标划过span元素的时候需要让再显示所以需要把透明度改为1

transition动画过度效果具体使用方法请看http://www.00h5.com/thread-15-1-1.html
其中transition-delay是transition的最后一个属性表示动画过度何时开始
再来看:nth-child,伪类选择器。
那么什么又是伪类？
伪类请看http://www.00h5.com/thread-76-1-1.html在这里我们用:nth-child来依次选择的设置span元素内容效果过渡，设置每个span的出现以及消失时间来达到效果。
最终完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>transition</title>
  6. <style>
  7. .box {
  8. background-image: linear-gradient(135deg, #723362, #9d223c);
  9. color: #fff;
  10. padding: 1em 0;
  11. text-align: center;
  12. font-weight: 300;
  13. text-transform: uppercase;
  14. letter-spacing: .4em;
  15. padding-left: .4em;
  16. font-size: 1.8em;
  17. margin-top: 2.5rem
  18. }
  19. .box span {opacity: 0;transition: opacity 1300ms}
  20. .box span:nth-child(1)  { transition-delay:  200ms }
  21. .box span:nth-child(2)  { transition-delay: 1200ms }
  22. .box span:nth-child(3)  { transition-delay:  800ms }
  23. .box span:nth-child(4)  { transition-delay:  300ms }
  24. .box span:nth-child(5)  { transition-delay:  700ms }
  25. .box span:nth-child(6)  { transition-delay:  600ms }
  26. .box span:nth-child(7)  { transition-delay:  400ms }
  27. .box span:nth-child(8)  { transition-delay:  900ms }
  28. .box span:nth-child(9)  { transition-delay:  700ms }
  29. .box span:nth-child(10) { transition-delay:   50ms }
  30. .box:hover span {opacity: 1}
  31. </style>
  32. </head>
  33. <body>
  34. <div class="box">
  35. <span>A</span>
  36. <span>B</span>
  37. <span>C</span>
  38. <span>D</span>
  39. <span>E</span>
  40. <span>F</span>
  41. <span>G</span>
  42. <span>H</span>
  43. <span>I</span>
  44. <span>J</span>
  45. </div>
  46. </body>
  47. </html>

转自零零H5http://www.00h5.com/thread-676-1-1.html

CSS3伪类nth-child结合transiton动画实现文字若影若现的更多相关文章

  1. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  2. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  3. 利用CSS3伪类做3D按钮

    这是通过css3伪类实现的3d按钮,html代码为: <div id="container_buttons"> <p><a class="a ...

  4. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  5. jQuery实现隔行变色、悬停变色 （ CSS3伪类选择器：nth-child() ）

    <title>实现隔行变色</title> <script src="Js/jquery-1.8.0.min.js" type="text/ ...

  6. CSS3伪类实现动画旋转效果

    一个简单的动画效果demo,keyframes为关键帧,图片贴在代码下方.利用了伪类实现css3动画效果,初学者可以看一下,恩.<!doctype html> <html lang= ...

  7. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  8. 玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

    在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...

  9. css3 -- 伪类与伪元素

    伪类: 1.结构伪类 A:E : first-child{} E : nth-*(n){} E : first-*(even){}  E : first-*(odd){} B:nth-child 是根 ...

随机推荐

  1. bzoj 2226: [Spoj 5971] LCMSum 数论

    2226: [Spoj 5971] LCMSum Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 578  Solved: 259[Submit][St ...

  2. angularjs 资源集合

    AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足. 源码托管在Github上,其通过使用指令(directives)结构来扩展HTML词汇 ...

  3. lc面试准备：Regular Expression Matching

    1 题目 Implement regular expression matching with support for '.' and '*'. '.' Matches any single char ...

  4. APUE读书笔记-第18章-终端I/O

    18.1 引言 *终端I/O的用途很广泛,包括用于终端.计算机之间的直接连线.调制解调器以及打印机等等,所以终端I/O系统非常复杂 18.2 综述 *终端I/O有两种不同的工作模式: (1)规范模式输 ...

  5. Android日志框架darks-logs使用教程

    一.配置文件 在使用darks-logs之前,我们需要为它创建一个名叫logd.properties的配置文件.如果你是需要在JAVA或WEB上使用该组件,那么你可以像配置log4j一样将它放在cla ...

  6. Linux Kernel 'perf_event.c'本地权限提升漏洞

    漏洞版本: Linux Kernel 3.11-rc4 漏洞描述: Linux Kernel是一款开源的操作系统 Linux Kernel 'perf_event.c'存在一个安全漏洞,允许本地攻击者 ...

  7. PHP Sessions子系统会话固定漏洞

    漏洞名称: PHP Sessions子系统会话固定漏洞 CNNVD编号: CNNVD-201308-193 发布时间: 2013-08-22 更新时间: 2013-08-22 危害等级: 中危   漏 ...

  8. java 去掉字符串右侧空格

    public static String rightTrim(String str) {    String regex = "(.*\\S+)(\\s+$)";    Patte ...

  9. Java基础之String,StringBuilder,StringBuffer

    在创建字符串的时候总是习惯性的使用String str = "...";,str = str+"abcd";也有听说过StringBuffer,StringBu ...

  10. C# 加密解密（DES,3DES,MD5,Base64） 类

    public sealed class EncryptUtils     {         #region Base64加密解密         /// <summary>        ...