CSS3 擬似クラス nth-child と遷移アニメーションを組み合わせて、shadow_html/css_WEB-ITnose として表示されるテキストを実現します

css3伪类nth-child结合transiton动画实现文字若影若现
收先创建一个div盒子，然后包裹在div中的有10个span标签每个span标签填上内容一次为A,B,C,D,E,F,G,H,I,,J
先看下效果图：

看HTML5代码：

2.                         A
3.                         B
4.                         C
5.                         D
6.                         E
7.                         F
8.                         G
9.                         H
10.                         I
11.                         J
12.                

コードをコピーします

次に、いくつかの CSS スタイルを div に追加します:

.box {
#9d223c);
2. #fff;
3. font-weight: 300;
4. text-transform : uppercase; padding-left: . 4EM;
Margin-Top: 2.5rem
5. }}
6. 4 4 4 4 4 (,,,, 、、、) そこに1 つのパラメータは、線形グラデーションの方向を表します。左上と定義されている場合は、左上隅から右下隅までです。ここで定義されているのは 135 度の角度で、2 番目と 3 番目のパラメータはそれぞれ開始色と終了色です。
その後、背景文字が #9d223c に設定されます
7. テキストは白、中央揃え、太字になります。 Text-transform: uppercase は、テキストが大文字で始まり、回転されることを意味します。言うまでもなく、残りはすべていくつかの共通の属性です。パディングとマージン、フォント サイズなどが含まれます。
8. 以下は実際のテーマ部分です:
次のコードを見てください:

9. 1. .box1 スパン {不透明度: 0;トランジション: 不透明度 1300ms}
   box:hover span {opacity: 1}
   .box span:nth-child(1) { 遷移遅延: 200ms }
   .box span:nth-child(2) { 移行遅延: 1200 ミリ秒 }
   .box span:nth-child(3) { 移行遅延: 800 ミリ秒 }
   .box スパン: nth-child(4) { 遷移-遅延: 300ミリ秒 }
   .box span:nth-child(5) { 移行遅延: 700ミリ秒 }
   .box scan:nth-child(6) { 600ms }
   .box span:nth -child(7) { 移行遅延: 400ミリ秒 }
   .box span:nth-child(8) { 移行遅延: 900ミリ秒 }
   .box span:nth-child(9) { 移行遅延: 700ms }
   .box span:nth-child(10) { 移行遅延: 50ms }
   复制代
   設定完了した div の css 式の後に最初に div の下にあるスパン要素の内容を実行しますあるいは透明化すると、opacity:0 の表示は透明になりますが、その値が 1 に設定されていれば不透明になりますが、もちろん不透明度の値を 0.5 や 0.3 などに設定しても良いです。透明を 0 に設定した後、スパン要素を通過するときに再表示する必要があるため、透明度を 1 に変更する必要がありますtransitionアニメーション画过度効果の具体的な使用方法を参照http://www.00h5.com/thread-15 -1-1.html

   この中のtransition-layは、遷移の最後のプロパティを示すアニメーション画の時間の開始
   再閲覧:nth-child、特種選択器。 ://www.00h5.com/thread-76-1-1.html ここでは、nth-child を使用して、次に選択された設定スパン要素のコンテンツ効果の移行、各スパンの発生および消失時間を設定して効果が得られます。
   最终完全整代：
   

   5. & lt;タイトル>トランジション