2020-05-28 - CSS を使用してページの読み込み時にフェードイン効果を作成するにはどうすればよいですか?

アニメーションとトランジションのプロパティを使用して、CSS を使用してページ読み込み時にフェードイン効果を作成します。

方法 1: CSS アニメーション プロパティを使用する: CSS アニメーションは 2 つのキーフレームによって定義されます。 1 つは不透明度を 0 に設定し、もう 1 つは不透明度を 1 に設定します。アニメーション タイプがイージーに設定されている場合、アニメーションはページ全体でスムーズにフェードインおよびフェードアウトします。

この属性は body タグに適用されます。ページが読み込まれるたびに、このアニメーションが再生され、ページがフェードインして表示されます。フェードイン時間はアニメーション属性で設定できます。

コードは次のとおりです:

body {
アニメーション: fadeInAnimationease 3s
animation-iteration-count: 1;
animation-fill-mode: forwards
}

@keyframes fadeInAnimation {
0% {
opacity : 0;
}
100% {
不透明度: 1;
}
}

例:

>
フェードの作成方法 -実際には
CSS を使用したページ読み込み時

CSS を使用してページの読み込み時にフェードイン効果を作成する方法

読み込み後にこのページがフェードインします

/ボディ>/html>

以上が2020-05-28 - CSS を使用してページの読み込み時にフェードイン効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。