はじめに
この実験では、CSS を使ってパルスエフェクトのローダーアニメーションを作成する方法を学びます。animation-delayプロパティを使ってリズミカルなエフェクトを作成し、@keyframesを使ってサイクルの 2 点でアニメーションを定義します。この実験が終わるとき、あなたはウェブページのユーザーエクスペリエンスを向上させる魅力的なアニメーションを作成する方法を十分に理解しているでしょう。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。
パルスローダー
VM 内には既にindex.htmlとstyle.cssが用意されています。
animation-delayプロパティを使ってパルスエフェクトのローダーアニメーションを作成するには、次の手順に従います。
@keyframesを使って 2 つの<div>要素に対するアニメーションを定義します。両方の要素の開始点（0%）では、widthやheightがなく、中央に配置されます。終了点（100%）では、両方の要素のwidthとheightが増加し、positionが0にリセットされます。- アニメーション時に
opacityを1から0に遷移させ、<div>要素が拡大するときに消えるエフェクトを与えます。 - 親コンテナ
.ripple-loaderに事前に定義されたwidthとheightを設定します。position: relativeを使って子要素を配置します。 - 2 番目の
<div>要素にanimation-delayを使い、各要素が異なるタイミングでアニメーションを開始するようにします。
これを達成するための HTML と CSS コードは次の通りです。
<div class="ripple-loader">
<div></div>
<div></div>
</div>
.ripple-loader {
position: relative;
width: 64px;
height: 64px;
}
.ripple-loader div {
position: absolute;
border: 4px solid #454ade;
border-radius: 50%;
animation: ripple-loader 1s ease-out infinite;
}
.ripple-loader div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes ripple-loader {
0% {
top: 32px;
left: 32px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 64px;
height: 64px;
opacity: 0;
}
}
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。
まとめ
おめでとうございます！あなたはパルスローダーの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習できます。