ホームページ > 記事 > ウェブフロントエンド > HTML+CSSでページロード(読み込み)アニメーション効果を実現
ページの閲覧中にページが読み込まれる状況に遭遇したことがありますか? フロントエンド開発者として、CSS3 と HTML を使用してページ読み込みアニメーション効果を作成する方法を知っていますか?この記事では、非常にシンプルで実用的な CSS3 サークル読み込みアニメーション効果コードを紹介します。これは一定の参考価値があるので、興味のある友人は参照してください。
読み込み読み込みアニメーションを実装するには、アニメーション アニメーション、表示、境界線の半径の丸い角、変換属性など、CSS3 で多くの属性と HTML タグを使用する必要があります。よくわからない場合は、以前に紹介した私の以前の記事を確認するか、CSS3 ビデオ チュートリアル にアクセスしてください。
デモの例: 3 つの円を使用してページ読み込みアニメーション効果を作成します。円は非表示から表示、そして非表示に変わります。具体的なコードは次のとおりです。
HTML 部分:
<div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div>
CSS3 部分:
.spinner { margin: 100px auto 0; width: 150px; text-align: center; } .spinner > div { width: 30px; height: 30px; background-color: #67CF22; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } }
効果は図に示すとおりです:
上記は CSS3 のメソッドを紹介しています。ページ読み込みアニメーション効果を実現します。 直接使用することも、好みのスタイルに変更することもできます。
【関連チュートリアルの推奨事項】
1. HTML ビデオ チュートリアル
2. CSS3 オンライン マニュアル
3.ブートストラップ チュートリアル
以上がHTML+CSSでページロード(読み込み)アニメーション効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。