今回は、いくつかの一般的なローディングエフェクトの実装と、ローディングエフェクトを実装する際に注意する必要がある点について説明します。以下は実際のケースです。
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
<style>
.loader {
float: left;
}
.loader {
position: relative;
width: 5rem;
height: 5rem;
}
.loader.small {
-webkit-transform: scale(.5);
transform: scale(.5);
}
.loader.circle-line,
.loader.circle-round {
height: 5rem;
}
/*circle-line*/
.loader.circle-line span {
position: absolute;
display: inline-block;
width: 1.5rem;
height: .5rem;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
background: #1ABC9C;
opacity: .05;
-webkit-animation: circle-line 1s ease infinite;
animation: circle-line 1s ease infinite;
}
.loader.circle-line span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.25rem;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.circle-line span:nth-child(2) {
top: 1rem;
left: .5rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.circle-line span:nth-child(3) {
left: 50%;
top: .5rem;
margin-left: -.75rem;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.circle-line span:nth-child(4) {
right: .5rem;
top: 1rem;
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.circle-line span:nth-child(5) {
left: 3.5rem;
top: 50%;
margin-top: -.25rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
.loader.circle-line span:nth-child(6) {
bottom: 1rem;
right: .5rem;
-webkit-transform: rotate(-145deg);
transform: rotate(-145deg);
-webkit-animation-delay: .78s;
animation-delay: .78s;
}
.loader.circle-line span:nth-child(7) {
left: 50%;
bottom: .5rem;
margin-left: -15px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation-delay: .91s;
animation-delay: .91s;
}
.loader.circle-line span:nth-child(8) {
bottom: 1rem;
left: .5rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation-delay: 1.04s;
animation-delay: 1.04s;
}
@keyframes circle-line {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@-webkit-keyframes circle-line {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
/*circle-line-spin*/
.loader.circle-line-spin .circle-line-inner {
width: 100%;
height: 100%;
-webkit-animation: circle-line-spin 1.5s linear infinite;
animation: circle-line-spin 1.5s linear infinite;
}
.loader.circle-line-spin span {
position: absolute;
display: inline-block;
width: 1.5rem;
height: .5rem;
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;
background: #1ABC9C;
opacity: .7;
}
.loader.circle-line-spin span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.25rem;
}
.loader.circle-line-spin span:nth-child(2) {
top: 1rem;
left: .5rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.loader.circle-line-spin span:nth-child(3) {
left: 50%;
top: .5rem;
margin-left: -.75rem;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.loader.circle-line-spin span:nth-child(4) {
right: .5rem;
top: 1rem;
-webkit-transform: rotate(145deg);
transform: rotate(145deg);
}
.loader.circle-line-spin span:nth-child(5) {
left: 3.5rem;
top: 50%;
margin-top: -.25rem;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.loader.circle-line-spin span:nth-child(6) {
bottom: 1rem;
right: .5rem;
-webkit-transform: rotate(-145deg);
transform: rotate(-145deg);
}
.loader.circle-line-spin span:nth-child(7) {
left: 50%;
bottom: .5rem;
margin-left: -15px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.loader.circle-line-spin span:nth-child(8) {
bottom: 1rem;
left: .5rem;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@keyframes circle-line-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes circle-line-spin {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
/*circle-round*/
.loader.circle-round span {
opacity: .05;
-webkit-animation: circle-round 1s ease infinite;
animation: circle-round 1s ease infinite;
}
.loader.circle-round-fade span {
-webkit-animation: circle-round-fade 1s ease infinite;
animation: circle-round-fade 1s ease infinite;
}
.loader.circle-round span,
.loader.circle-round-fade span {
position: absolute;
width: .8rem;
height: .8rem;
display: inline-block;
border-radius: 50%;
background: #1ABC9C;
}
.loader.circle-round span:nth-child(1),
.loader.circle-round-fade span:nth-child(1) {
top: 50%;
left: 0;
margin-top: -.4rem;
-webkit-animation-delay: -1.04s;
animation-delay: -1.04s;
}
.loader.circle-round span:nth-child(2),
.loader.circle-round-fade span:nth-child(2) {
top: .7rem;
left: .7rem;
-webkit-animation-delay: -.91s;
animation-delay: -.91s;
}
.loader.circle-round span:nth-child(3),
.loader.circle-round-fade span:nth-child(3) {
top: 0;
left: 50%;
margin-left: -.4rem;
-webkit-animation-delay: -.78s;
animation-delay: -.78s;
}
.loader.circle-round span:nth-child(4),
.loader.circle-round-fade span:nth-child(4) {
right: .7rem;
top: .7rem;
-webkit-animation-delay: -.65s;
animation-delay: -.65s;
}
.loader.circle-round span:nth-child(5),
.loader.circle-round-fade span:nth-child(5) {
right: 0;
top: 50%;
margin-top: -.4rem;
-webkit-animation-delay: -.52s;
animation-delay: -.52s;
}
.loader.circle-round span:nth-child(6),
.loader.circle-round-fade span:nth-child(6) {
bottom: .7rem;
right: .7rem;
-webkit-animation-delay: -.39s;
animation-delay: -.39s;
}
.loader.circle-round span:nth-child(7),
.loader.circle-round-fade span:nth-child(7) {
bottom: 0;
left: 50%;
margin-left: -.4rem;
-webkit-animation-delay: -.26s;
animation-delay: -.26s;
}
.loader.circle-round span:nth-child(8),
.loader.circle-round-fade span:nth-child(8) {
left: .7rem;
bottom: .7rem;
-webkit-animation-delay: -.13s;
animation-delay: -.13s;
}
@keyframes circle-round {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@-webkit-keyframes circle-round {
0% {
opacity: .05;
}
100% {
opacity: .7;
}
}
@keyframes circle-round-fade {
0% {
opacity: .25;
transform: scale(.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes circle-round-fade {
0% {
opacity: .25;
transform: scale(.2);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/*line-square*/
.loader.line-square {
width: 6rem;
height: .8rem;
}
.loader.line-square span {
position: absolute;
top: 0;
width: .8rem;
height: .8rem;
display: inline-block;
background: #1ABC9C;
-webkit-animation: line-square 1s ease infinite;
animation: line-square 1s ease infinite;
}
.loader.line-square span:nth-child(1) {
left: 0;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.line-square span:nth-child(2) {
left: 1.3rem;
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.line-square span:nth-child(3) {
left: 2.6rem;
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.line-square span:nth-child(4) {
left: 3.9rem;
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.line-square span:nth-child(5) {
left: 5.2rem;
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
@keyframes line-square {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
@-webkit-keyframes line-square {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
/*line-round*/
.loader.line-round {
width: 6rem;
height: .8rem;
}
.loader.line-round span {
position: absolute;
top: 0;
width: .8rem;
height: .8rem;
border-radius: 50%;
display: inline-block;
background: #1ABC9C;
-webkit-animation: line-round 1s ease infinite;
animation: line-round 1s ease infinite;
}
.loader.line-round span:nth-child(1) {
left: 0;
-webkit-animation-delay: .13s;
animation-delay: .13s;
}
.loader.line-round span:nth-child(2) {
left: 1.3rem;
-webkit-animation-delay: .26s;
animation-delay: .26s;
}
.loader.line-round span:nth-child(3) {
left: 2.6rem;
-webkit-animation-delay: .39s;
animation-delay: .39s;
}
.loader.line-round span:nth-child(4) {
left: 3.9rem;
-webkit-animation-delay: .52s;
animation-delay: .52s;
}
.loader.line-round span:nth-child(5) {
left: 5.2rem;
-webkit-animation-delay: .65s;
animation-delay: .65s;
}
@keyframes line-round {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
@-webkit-keyframes line-round {
0% {
opacity: 1;
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
100% {
opacity: .2;
transform: scale(.2);
-webkit-transform: scale(.2);
}
}
/*line-bounce*/
.loader.line-bounce {
width: 6rem;
height: 2.5rem;
}
.loader.line-bounce span {
position: absolute;
top: 0;
width: .5rem;
height: 2.5rem;
border-radius: 5px;
display: inline-block;
background: #1ABC9C;
-webkit-animation: line-bounce 1s ease infinite;
animation: line-bounce 1s ease infinite;
}
.loader.line-bounce span:nth-child(1) {
left: 0;
-webkit-animation-delay: -.65s;
animation-delay: -.65s;
}
.loader.line-bounce span:nth-child(2) {
left: 1.3rem;
-webkit-animation-delay: -.78s;
animation-delay: -.78s;
}
.loader.line-bounce span:nth-child(3) {
left: 2.6rem;
-webkit-animation-delay: -.91s;
animation-delay: -.91s;
}
.loader.line-bounce span:nth-child(4) {
left: 3.9rem;
-webkit-animation-delay: -.78s;
animation-delay: -78s;
}
.loader.line-bounce span:nth-child(5) {
left: 5.2rem;
-webkit-animation-delay: -.65s;
animation-delay: -.65s;
}
@keyframes line-bounce {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.3);
}
100% {
transform: scaleY(1);
}
}
@-webkit-keyframes line-bounce {
0% {
-webkit-transform: scaleY(1);
}
50% {
-webkit-transform: scaleY(.3);
}
100% {
-webkit-transform: scaleY(1);
}
}
/*circle-spin*/
.loader.circle-spin {
border-radius: 50%;
border: .2rem solid rgba(0, 0, 0, .05);
width: 4rem;
height: 4rem;
box-sizing: content-box;
}
.loader.circle-spin .loader-placeholder {
position: absolute;
top: -.2rem;
left: -.2rem;
border-radius: 50%;
border: .2rem solid transparent;
border-top: .2rem solid #1ABC9C;
width: 4rem;
height: 4rem;
box-sizing: content-box;
-webkit-animation: circle-spin 1s ease infinite;
animation: circle-spin 1s ease infinite;
}
@keyframes circle-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes circle-spin {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div>
<div class="loader circle-line small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader circle-line-spin small">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="loader circle-round small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader circle-round-fade small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader line-square small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader line-round small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader line-bounce small">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="loader circle-spin small">
<div></div>
</div>
</div>
</body>
</html>これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連書籍:
以上がいくつかの一般的なローディング効果の実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
カーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AMCSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。
Worlds Collide：スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee＆＃039;の疑いを補強します。
UI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AMCSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。
微笑んでいますか？Apr 23, 2025 am 09:57 AMまあ、SVG＆＃039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです
「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AMイェーイ、テキストワラップのジャンプを見てみましょう：サファリテクノロジーのプレビューにかなり着陸してください！しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。
CSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AMこのCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。
Tailwind＆＃039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AMほとんどの場合、人々はTailwind＆＃039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio
私はリリースがないように感じます：正気な展開への旅Apr 23, 2025 am 09:19 AM馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
4週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
4週間前ByDDD
<🎜>：Dead Rails-すべての課題を完了する方法
1 か月前ByDDD
Atomfall Guide：アイテムの場所、クエストガイド、およびヒント
1 か月前ByDDD
ホットツール
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
ホットトピック
Gmailメールのログイン入り口はどこですか？
769615
7696
15Java チュートリアル164014
164014CakePHP チュートリアル139352
139352Laravel チュートリアル128725
128725PHP チュートリアル122929
122929