インターネット速度が低いときに Web サイトを開いたり、ビデオを視聴したりすると、ページの読み込みが非常に遅くなります。このとき、通常、ユーザーに「ページを読み込んでいます。お待ちください」というメッセージが表示されます。回り続ける円。 HTML と CSS を学習している友人の皆さん、CSS3 を使用して円を読み込むアニメーション効果を実現できますか?この記事では、純粋な CSS3 で実装されたサークル (ローディング) ローディング アニメーションの特殊効果を紹介します。興味のある方は参考にしてください。
CSS3 を使用して円読み込み効果を作成するには、アニメーション、キーフレーム、境界半径フィレットなど、CSS3 の多くの属性を使用する必要があります。これらの属性についてよくわからない場合は、 PHP 中国語 Web サイト 関連記事、または CSS3 ビデオ チュートリアル にアクセスしてください。
次に、HTML と CSS を使用してページ サークル読み込みアニメーションを作成する方法を詳しく紹介します。
HTML 部分:
ページ内に div を作成します。アニメーションをロードする円を配置し、CSS スタイルの設定を容易にするために div にクラス名を付けます。 具体的なコードは次のとおりです。
<body> <h3>CSS圆圈加载样式</h3> <div class="loading"></div> </body>
CSS 部分:
最初に、 div の長さと高さを 120px に設定し、次に border-radius: を 50% に設定して円形にし、border: 16px Solid #f3f3f3 を使用して円の幅と色を設定し、最後に境界線を介してスクロール可能な部分を設定します。最上位の属性。基本的なスタイルが完成したら、CSS3 のアニメーションを使用して無限ループで回転させます。具体的なコードは次のとおりです。
.loading { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
注: -webkit- および -ms- プレフィックスは、ブラウザの互換性を確保するために、アニメーションと変換属性をサポートしていないものを追加する必要があります。
レンダリング:
上記では、円 (読み込み) 読み込みアニメーションを実現するための純粋な CSS3 の特殊効果について説明しました。もっと詳しく知りませんでした。この記事が役立つことを願っています。
さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています: js 特殊効果コレクション
その他の関連チュートリアルについては、最新バージョンの にアクセスしてください。 CSS3 リファレンス マニュアル
以上がPure CSS3 はページサークルローディングアニメーションの特殊効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。