実装方法:「@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 サイトの他の関連記事を参照してください。