CSS3 pseudo-class Nth-child combined with Transiton animation to achieve the text if the shadow of the present

CSS3 pseudo-class Nth-child combined with Transiton animation to achieve the text if the shadow of the present
To create a div box and then wrap it in a div with 10 span tags, fill in the contents of each span tag once for A,B,C,D,E,F,G,H,I,,J
First look at the following:

See HTML5 Code:

2. <div class= "box" >
4. <span>A</span>
6. <span>B</span>
8. <span>C</span>
10. <span>D</span>
12. <span>E</span>
14. <span>F</span>
16. <span>G</span>
18. <span>H</span>
20. <span>I</span>
22. <span>J</span>
24. </div>

Copy Code

Next, add some CSS styles to the div:

2. . box {
4. Background-image:linear-gradient (135deg, #723362, #9d223c);
8. Color: #fff;
10. Padding:1em 0;
12. Text-align:center;
14. font-weight:300;
16. Text-transform:uppercase;
18. Letter-spacing:. 4em;
20. Padding-left:. 4em;
22. Font-size:1.8em;
24. Margin-top:2.5rem
26. }

Copy Code

One thing to say here is linear-gradient (,,,)
A total of three parameters, the first parameter represents the direction of the linear gradient, top is from top to bottom, left is from Ieft to right, if it is defined as left top, it is from the upper right corner to the bottom of the bottom. This defines an angle of 135 degrees, and the second and third parameters are the starting and ending colors, respectively.
Then the background role is set to #9d223c
The text is white, and the center display, the text bold display, where text-transform:uppercase represents the text is only in the beginning of the capital letter rotation, and some of the others do not have to say that are common some of the properties of what the margin outside AH font size AH and so on.

The following is the Real Entry topic section:
Look at the following code:

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

Copy Code

After setting up the CSS style of the DIV, we must first hide the contents of the span element under the DIV or make him transparent, and opacity:0 is transparent if the value set to 1 is opaque. Of course you can also set to 0.5 or 0.3 and so on, the value of opacity is between 0 and 1.
After the initialization setting is 0 transparent, we need to display the opacity when we hover over the span element so we need to change the transparency to 1.

Transition animation over-effect specific use of the method, see http://www.00h5.com/thread-15-1-1.html
Where Transition-delay is the last property of transition indicates when the animation is over when it starts
Look again: Nth-child, pseudo class selector.
So what is pseudo-class?
Pseudo-Class See http://www.00h5.com/thread-76-1-1.html Here we use: Nth-child to select the set span element content effect transition, set the appearance of each span and vanishing time to achieve the effect.
Final complete code:

2. <! DOCTYPE html>
8. <meta charset= "UTF-8" >
10. <title>transition</title>
12. <style>
16. . box {
18. Background-image:linear-gradient (135deg, #723362, #9d223c);
22. Color: #fff;
24. Padding:1em 0;
26. Text-align:center;
28. font-weight:300;
30. Text-transform:uppercase;
32. Letter-spacing:. 4em;
34. Padding-left:. 4em;
36. Font-size:1.8em;
38. Margin-top:2.5rem
40. }
44. . Box span {opacity:0;transition:opacity 1300ms}
48. . Box Span:nth-child (1) {transition-delay:200ms}
50. . Box Span:nth-child (2) {transition-delay:1200ms}
52. . Box Span:nth-child (3) {transition-delay:800ms}
54. . Box Span:nth-child (4) {transition-delay:300ms}
56. . Box Span:nth-child (5) {transition-delay:700ms}
58. . Box Span:nth-child (6) {transition-delay:600ms}
60. . Box Span:nth-child (7) {transition-delay:400ms}
62. . Box Span:nth-child (8) {transition-delay:900ms}
64. . Box Span:nth-child (9) {transition-delay:700ms}
66. . Box Span:nth-child (Ten) {transition-delay:50ms}
68. . box:hover span {opacity:1}
72. </style>
76. <body>
78. <div class= "box" >
80. <span>A</span>
82. <span>B</span>
84. <span>C</span>
86. <span>D</span>
88. <span>E</span>
90. <span>F</span>
92. <span>G</span>
94. <span>H</span>
96. <span>I</span>
98. <span>J</span>
100. </div>
102. </body>

Transfer from 00 h5http://www.00h5.com/thread-676-1-1.html

CSS3 pseudo-class Nth-child combined with Transiton animation to achieve the text if the shadow of the present