コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3 擬似クラス nth-child と遷移アニメーションを組み合わせて、shadow_html/css_WEB-ITnose として表示されるテキストを実現します

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

WBOY
リリース： 2016-06-24 11:37:16
オリジナル
1500 人が閲覧しました

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

    1. .box1 スパン {不透明度: 0;トランジション: 不透明度 1300ms}
      2. box:hover span {opacity: 1}
      3. .box span:nth-child(1) { 遷移遅延: 200ms }
      4. .box span:nth-child(2) { 移行遅延: 1200 ミリ秒 }
      5. .box span:nth-child(3) { 移行遅延: 800 ミリ秒 }
      6. .box スパン: nth-child(4) { 遷移-遅延: 300ミリ秒 }
      7. .box span:nth-child(5) { 移行遅延: 700ミリ秒 }
      8. .box scan:nth-child(6) { 600ms }
      9. .box span:nth -child(7) { 移行遅延: 400ミリ秒 }
      10. .box span:nth-child(8) { 移行遅延: 900ミリ秒 }
      11. .box span:nth-child(9) { 移行遅延: 700ms }
      12. .box span:nth-child(10) { 移行遅延: 50ms }
      14. 复制代
    設定完了した 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;タイトル>トランジション