ホームページ >ウェブフロントエンド >CSSチュートリアル >Pure CSS3 はページサークルローディングアニメーションの特殊効果を実現します
Pure CSS3 はページサークルローディングアニメーションの特殊効果を実現します
- yuliaオリジナル
- 2018-10-27 16:48:2211277ブラウズ
インターネット速度が低いときに 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 サイトの他の関連記事を参照してください。