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. C#隐私信息(银行账户，身份证号码，名字)中间部分特殊字符替换(*)

    最近做到一个关于银行的一个功能模块,需要将隐私信息银行账号中间部分用*代替,于是写下了,如下代码: /// <summary> /// 将传入的字符串中间部分字符替换成特殊字符 /// & ...

  2. 变更到Android4.4的问题

    更新到Android 4.4,写了个小程序.发现运行不起来了.抛空指针异常.debug模式下,发现在onCreate方法中获取Button是null. Android 4.4把layout进行了重组, ...

  3. Hadoop 学习笔记 （十） MapReduce实现排序 全局变量

    一些疑问:1 全排序的话,最后的应该sortJob.setNumReduceTasks(1);2 如果多个reduce task都去修改 一个静态的 IntWritable ,IntWritable会 ...

  4. sqlplus 打印很乱，而且很短就换行

    set linesize 可以解决 设置行打印的字符长度,set linesize 400解决

  5. Windows窗口样式速查参考，Delphi窗口控件的风格都有它们来决定（附Delphi何时用到它们，并举例说明）good

    /* 窗口样式参考列表(都是GetWindowLong的GWL_STYLE风格,都是TCreateParams.Sytle的一部分),详细列表如下:https://msdn.microsoft.com ...

  6. 加快AndroidStudio运行速度的方法

    之前用过其他人加速AndroidStudio构建速度的方法,确实在编译时有一定的效果 但是在实际使用中,随着项目越来越大,AndroidStudio有时还是会卡死,或者直接黑屏,我的笔记本是8g内存 ...

  7. leetcode面试准备:Decode Ways

    1 题目 A message containing letters from A-Z is being encoded to numbers using the following mapping: ...

  8. SVN 修改URL路径|SVN 项目路径修改

    在svn的根目录下面右键 输入要修改的地址: 点击ok 搞定... ~~~

  9. RHCS集群理论暨最佳实践

    RHCS集群理论暨 最佳实践 什么是集群?     集群是一组(>2)相互独立的,通过高速网络互联的计算机组成的集合.群集一般可以分为科学集群,负载均衡集群,高可用性集群三大类.     科学集 ...

  10. 许令波老师的java的IO机制分析文章

    深入分析 Java I/O 的工作机制 I/O 问题可以说是当今互联网 Web 应用中所面临的主要问题之一,因为当前在这个海量数据时代,数据在网络中随处流动.这个流动的过程中都涉及到 I/O 问题,可 ...