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. Hdu5517 Triple

    Description Given the finite multi-set \(A\) of \(n\) pairs of integers, an another finite multi-set ...

  2. BZOJ 4011 开店

    Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的想法当然非常好啦,但是她们也发现她们 ...

  3. Java 8：如何使用流方式查询数据库？

    Speedment 是使用 ORM 方式操作数据库的一种选择,以前我们需要100行操作数据库的 Java 代码,在 Java 8中,可能只需要一行代码. 在90年代末,我使用 Java 开发数据库应用 ...

  4. codeforces D. Pashmak and Parmida's problem

    http://codeforces.com/contest/459/problem/D 题意:给你n个数,然后统计多少组(i,j)使得f(1,i,ai)>f(j,n,aj); 思路:先从左往右统 ...

  5. CABAC

    CABAC(Context-based Adaptive Binary Arithmetic Coding),基于上下文的自适应二进制算术编码.CABAC是H.264/AVC标准中两种熵编码中的一种, ...

  6. wpf 动画

    1动画实现 通过控件的属性 RenderTransform 设置 (1)设置控件的变化类型,如平移变化,旋转变化等,变化起点. (2)根据属性值链接相应的动画类型,如简单动画,关键帧,路径动画以及故事 ...

  7. redis3.0集群搭建

    生产环境中准备使用redis3.0集群了,花了一天时间研究了一下,下面记录一下集群搭建的过程. 服务器规划: 192.168.116.129    7000,7003 192.168.116.130 ...

  8. 【转】Android编译系统详解(三)——编译流程详解

    原文网址:http://www.cloudchou.com/android/post-276.html 本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 1.概述 编译Androi ...

  9. Unity3d fur真实毛发渲染

    放出效果图 使用的核心技术为曲面细分和置换贴图,Unity支持GPU的曲面细分,置换贴图为噪波,沿着法线拉伸即成为毛发.再随机减少最高点的高度产生毛刺的感觉 曲面细分之前有篇文章详细讲过 弄了前后ri ...

  10. 解决外部机器通过VM内ubuntu IP 无法访问vm内web服务的问题

    1. 2.i root@ubuntu:/home/udapeng# ifconfig root@ubuntu:/www/sentry# nano uwsgi.ini root@ubuntu:/www/ ...