正文

CSS3伪类nth-child结合transiton动画实现文字若影若现

IP云
IP云V管理员/5 阅读
08/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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