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. 通过CTAPI和Citect SCADA软件进行数据通讯

    官方文档 Citect SCADA 7.20 Technical Reference 参考文献 基于Citect远程控制的变流量堆料控制系统 [王玉增,顾英妮,王维 济南大学,机械工程学院 ,Cite ...

  2. http server v0.1_http_server.c

    /**************************************************************** filename: http_server.c author: xx ...

  3. MacOS快捷键

  4. 使用expect实现批量操作的自动化

    http://blog.csdn.net/hijk139/article/details/9121345

  5. java中的信号量Semaphore

    Semaphore(信号量)充当了操作系统概念下的“信号量”.它提供了“临界区中可用资源信号量”的相同功能.以一个停车场运作为例.为了简单起见,假设停车场只有三个车位,一开始三个车位都是空的.这时如果 ...

  6. RSA算法原理（二）

    上一次,我介绍了一些数论知识. 有了这些知识,我们就可以看懂RSA算法.这是目前地球上最重要的加密算法. 六.密钥生成的步骤 我们通过一个例子,来理解RSA算法.假设爱丽丝要与鲍勃进行加密通信,她该怎 ...

  7. RESTful, 说说 http 的 patch method

    最早的时候,我们只需要 GET 和 POST 方法,POST 方法的引入也只是为了消除 URL 过长,参数隐藏,上传文件的问题,完全和语义无关.接触到 RESTful 之后,我们开始思考 GET 和 ...

  8. squid透明代理+iptables防火墙,多网卡详细配置

    squid透明代理+iptables防火墙详细配置 看到很多人都在不停地问iptables+squid做透明代理的问题,鄙人不才,斗胆在此做统一解答.如有任何纰漏还望各位批评指教. ========= ...

  9. bzoj3209

    首先这道题目不难想到将答案转化为这种形式 2^s[2]*3*s[3]*…max*s[max] 这时候我们要分类讨论,设n的二进制位数为t 当1~n中二进制位数小于t时 我们可以直接用组合的知识,二进制 ...

  10. 队爷的Au Plan CH Round #59 - OrzCC杯NOIP模拟赛day1

    题目:http://ch.ezoj.tk/contest/CH%20Round%20%2359%20-%20OrzCC杯NOIP模拟赛day1/队爷的Au%20Plan 题解:看了题之后觉得肯定是DP ...