純粋な CSS を使用して単純な読み込みアニメーション効果を実現します (コード例)

この記事では、コード例を使用して、純粋な CSS を使用して単純な読み込みアニメーション効果を実現する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[推奨チュートリアル: CSS ビデオ チュートリアル ]

現在、多くの Web サイトで読み込み効果に gif 画像が使用されていることがわかりました。興味があるのですが、CSS だけを使用してこれを実現するにはどうすればよいでしょうか?素敵な商品が入荷しておりますので、ぜひ手に取ってみてください。

難易度

##レンダリング

Ideas

CSS は HTML の変更に使用されるため、最も単純なエフェクトでも HTML に依存しており、この例のエフェクトの HTML レイアウトはさらに重要です。

最初にアニメーション効果の構成を分析しましょう:

• Lines
  • 読み込みが静止している場合、複数の線が円を形成します
  • これらの線の長さは同じですが、方向が異なります
  • 各線は直径全体を通っているのではなく、半径に基づいています
• 円
  • 全体的な効果はリングで、内側の円の背景色は背景全体と一致しています
• アニメーション
  • ある線から始まる色は、各半径線の (透明度) は 1 つずつ変化します

要約すると、次の手順を使用して、ローディング効果の謎を段階的に解き明かします。

(1) HTML を使用して、ある点に沿って同じ線が分布し、円を形成することを実現します。

(2) 小さな円を描き、背景色を追加し、それを中心に塗りつぶします。 line

##(3) グラデーション アニメーションを追加して線の透明度を変更します

(4) 線ごとに異なるアニメーション遅延を設定して、線を動かします

##HTML

<div id="container">
	<div class="load-line rotate-0">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-30">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-60">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-90">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-120">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-150">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div id="circle-center"></div>
</div>

分析:

load-lineは同じ直径の半径線を表し、回転方向が同じなので同じpに入れます

各半径線のアニメーション遅延が異なるため、左右の線を追加します
• circle-center は内側の円を表します
• CSS

#container, #circle-center {
	background: grey;
}
#container {
	position: relative;
	width: 600px;
	height: 300px;
}
#circle-center {
	position: absolute;
	top: 100px;
	left: 250px;
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.load-line {
	position: absolute;
	top: 150px;
	left: 200px;
	width: 200px;
	height: 13px;
}
.load-line > span {
	display: inline-block;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background: white;
}
.left {
	float: left;
}
.right {
	float: right;
}
.rotate-0 {
	transform: rotate(0);
}
.rotate-0 > .left {
	animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
	animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-30 > .left {
	animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
	animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-60 > .left {
	animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
	animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-90 > .left {
	animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
	animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
	transform: rotate(120deg);
}
.rotate-120 > .left {
	animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
	animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
	transform: rotate(150deg);
}
.rotate-150 > .left {
	animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
	animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

分析:

エフェクト全体の親コンテナー 子要素のレイアウトを容易にするために、非静的配置を設定する必要があります。この例は相対的なものです。

すべての線は同じサイズで、角が丸くなっています。
• 同じ直径方向に沿った線の回転角度は同じです。
• すべての線のアニメーション効果ラインは同じです (透明度は変化します)、アニメーションの長さは同じです、アニメーションの遅延は特定のラインから始まり、1 つずつ増加します
• プログラミング関連の知識の詳細については、以下を参照してください。
プログラミング ビデオ

! ！

以上が純粋な CSS を使用して単純な読み込みアニメーション効果を実現します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。