CSS トランジションはページ読み込み時にテキストのフェードイン効果を作成できますか?

ページ読み込み時のフェードイン効果に CSS を使用する

テキスト段落をフェードインするために CSS トランジションを効果的に使用できますか?ページが読み込まれますか?

そうですね。 CSS トランジションは、この視覚効果に対するシンプルなソリューションを提供します。次の手順を検討してください:

ステップ 1: CSS を定義する

テキスト段落の初期表示設定を指定する CSS ルールを作成します:

#test p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    transition: opacity 2s ease-in;  
}

• opacity: 0 は、不透明度を に設定することで、最初は段落を非表示にします。 0.
• margin-top: 25px および font-size: 21px でスタイルを調整します。
• text-align: center でテキストが中央に配置されます。
• transition: opacity 2s easy-で;トランジションの持続時間とイージング効果を設定します。

ステップ 2: 不透明度を切り替える

トランジションをトリガーするには、不透明度を変更する必要があります。ページが読み込まれた後の段落。これは、以下を使用して実現できます。

方法 1: CSS アニメーション (自己呼び出し)

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#test p { ... } /* Apply the fadein animation */

方法 2: jQuery または Plain JavaScript

• jQuery: $("#test p").addClass("load");
• プレーン JavaScript: document.getElementById("test").children[0].className = "load";

ステップ 3: 「load」クラスの CSS を調整する

クラスを追加した状態で、以下を定義します「ロード」状態にある段落のスタイル:

#test p.load {
    opacity: 1;
}

または、JavaScript を使用して不透明度を直接変更することもできます。

以上がCSS トランジションはページ読み込み時にテキストのフェードイン効果を作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。