ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3で画像が消えるアニメーション効果を実現する方法
CSS3で画像が消えるアニメーション効果を実現する方法
- 青灯夜游オリジナル
- 2022-03-18 16:19:474533ブラウズ
実装方法:「@keyframesアニメーション名{}」ルールと「opacity:transparency;」ステートメントを使用して絵が消えるアニメーションを作成します; 2.「絵要素{opacity:0;アニメーション:アニメーション」を使用しますname time 1; }" ステートメントを使用して、絵要素に絵が消えるアニメーションを適用できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、アニメーション属性、「@keyframes」ルール、不透明度属性を使用して、画像が消えるアニメーション効果を実現できます。
@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。
@keyframes を使用してアニメーションのアクションを定義します。その後、さまざまな CSS アニメーション プロパティを使用して、アニメーションの反復回数、開始値と終了値を切り替えるかどうかなど、アニメーションのさまざまな側面を制御できます。 、アニメーションを実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。
opacity 属性は要素の透明度を制御します。
実装コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
img {
opacity: 0;
animation: mymove 3s 1;
/* Safari and Chrome */
-webkit-animation: mymove 3s 1;
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="CSS3で画像が消えるアニメーション効果を実現する方法" >
</body>
</html>
(学習ビデオ共有: css ビデオ チュートリアル、Web フロントエンド）
以上がCSS3で画像が消えるアニメーション効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。