パルス効果の CSS ローダーアニメーションの作成

CSSCSSBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、CSSを使ってパルスエフェクトのローダーアニメーションを作成する方法を学びます。animation-delayプロパティを使ってリズミカルなエフェクトを作成し、@keyframesを使ってサイクルの2点でアニメーションを定義します。この実験が終わるとき、あなたはウェブページのユーザーエクスペリエンスを向上させる魅力的なアニメーションを作成する方法を十分に理解しているでしょう。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/DynamicStylingGroup -.-> css/animations("Animations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/colors -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/borders -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/width_and_height -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/positioning -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/pseudo_classes -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/animations -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} css/mixins -.-> lab-35232{{"パルス効果の CSS ローダーアニメーションの作成"}} end

パルスローダー

VM内には既にindex.htmlstyle.cssが用意されています。

animation-delayプロパティを使ってパルスエフェクトのローダーアニメーションを作成するには、次の手順に従います。

  1. @keyframesを使って2つの<div>要素に対するアニメーションを定義します。両方の要素の開始点(0%)では、widthheightがなく、中央に配置されます。終了点(100%)では、両方の要素のwidthheightが増加し、position0にリセットされます。
  2. アニメーション時にopacity1から0に遷移させ、<div>要素が拡大するときに消えるエフェクトを与えます。
  3. 親コンテナ.ripple-loaderに事前に定義されたwidthheightを設定します。position: relativeを使って子要素を配置します。
  4. 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でさらに多くの実験を練習できます。