CSSは解析プロセスでさまざまな読み込み効果を実装します

CSSは解析プロセスでさまざまな読み込み効果を実装します

html

<div class="スピナー"></div>

CS

.スピナー{
  幅: 40px;
  高さ: 40px;
  背景色: #333;

  マージン: 100px 自動;
  -webkit-animation: sk-rotateplane 1.2s 無限イーズインアウト;
  アニメーション: sk-rotateplane 1.2s 無限イーズインアウト;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: パースペクティブ(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    変換: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: 視点(120px) 回転X(0度) 回転Y(0度) 
  } 50% { 
    変換: 視点(120px)、回転X(-180.1度)、回転Y(0度);
    -webkit-transform: 視点(120px) 回転X(-180.1度) 回転Y(0度) 
  } 100% { 
    変換: 視点(120px)、回転X(-180度)、回転Y(-179.9度);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

分析: div要素を定義し、辺の長さを 40 ピクセル、背景を白に設定し、ループ フリップ アニメーションを設定して読み込み効果アニメーションを実現します。

perspective プロパティは、ビューからの 3D 要素の距離を定義します。

html

<div class="sk-chase">
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
  <div class="sk-chase-dot"></div>
</div>

CS

.sk-チェイス{
  幅: 40px;
  高さ: 40px;
  位置: 相対的;
  アニメーション: sk-chase 2.5 秒 無限線形 両方;
}

.sk-チェイスドット{
  幅: 100%;
  高さ: 100%;
  位置: 絶対;
  左: 0;
  上: 0; 
  アニメーション: sk-chase-dot 2.0s 無限のease-in-out 両方; 
}

.sk-chase-dot:before {
  コンテンツ： '';
  表示: ブロック;
  幅: 25%;
  高さ: 25%;
  背景色: #fff;
  境界線の半径: 100%;
  アニメーション: sk-chase-dot-before 2.0s 無限のease-in-out 両方; 
}

.sk-chase-dot:nth-child(1) { アニメーション遅延: -1.1s; }
.sk-chase-dot:nth-child(2) { アニメーション遅延: -1.0s; }
.sk-chase-dot:nth-child(3) { アニメーション遅延: -0.9s; }
.sk-chase-dot:nth-child(4) { アニメーション遅延: -0.8s; }
.sk-chase-dot:nth-child(5) { アニメーション遅延: -0.7s; }
.sk-chase-dot:nth-child(6) { アニメーション遅延: -0.6s; }
.sk-chase-dot:nth-child(1):before { アニメーション遅延: -1.1s; }
.sk-chase-dot:nth-child(2):before { アニメーション遅延: -1.0s; }
.sk-chase-dot:nth-child(3):before { アニメーション遅延: -0.9s; }
.sk-chase-dot:nth-child(4):before { アニメーション遅延: -0.8s; }
.sk-chase-dot:nth-child(5):before { アニメーション遅延: -0.7s; }
.sk-chase-dot:nth-child(6):before { アニメーション遅延: -0.6s; }

@keyframes sk-chase {
  100% { 変換: 回転(360度); } 
}

@keyframes sk-chase-dot {
  80%、100% { 変換: 回転(360度); } 
}

@keyframes sk-chase-dot-before {
  50% {
    変換: スケール(0.4); 
  } 100%、0% {
    変換: スケール(1.0); 
  } 
}

分析: 親要素のdivを定義し、6つの白い点を含め、回転アニメーションを追加し、異なる遅延時間を設定すると、順番に表示される効果が得られます。

html

<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>

CS

.スピナー{
  幅: 40px;
  高さ: 40px;

  位置: 相対的;
  マージン: 100px 自動;
}

.ダブルバウンス1、.ダブルバウンス2 {
  幅: 100%;
  高さ: 100%;
  境界線の半径: 50%;
  背景色: #333;
  不透明度: 0.6;
  位置: 絶対;
  上: 0;
  左: 0;
  
  -webkit-animation: sk-bounce 2.0s 無限イーズインアウト;
  アニメーション: sk-bounce 2.0s 無限イーズインアウト;
}

.ダブルバウンス2 {
  -webkit アニメーション遅延: -1.0 秒;
  アニメーション遅延: -1.0秒;
}

@-webkit-keyframes sk-bounce {
  0%、100% { -webkit-transform: スケール(0.0) }
  50% { -webkit-transform: スケール(1.0) }
}

@keyframes sk-バウンス {
  0%、100% { 
    変換: スケール(0.0);
    -webkit-transform: スケール(0.0);
  } 50% { 
    変換: スケール(1.0);
    -webkit-transform: スケール(1.0);
  }
}

分析: 半透明の円を実現するために、2 つの子 div 要素が使用されています。これらは互いに重なるように絶対配置され、同じアニメーションが異なる遅延時間で交互にズームインとズームアウトするように設定されています。

html

<div class="spinner">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

CS

.スピナー{
  マージン: 100px 自動;
  幅: 50px;
  高さ: 40px;
  テキスト配置: 中央;
  フォントサイズ: 10px;
}

.spinner > div {
  背景色: #333;
  高さ: 100%;
  幅: 6px;
  表示: インラインブロック;
  
  -webkit-animation: sk-stretchdelay 1.2s 無限イーズインアウト;
  アニメーション: sk-stretchdelay 1.2s 無限イーズインアウト;
}

.スピナー.rect2 {
  -webkit アニメーション遅延: -1.1 秒;
  アニメーション遅延: -1.1秒;
}

.スピナー.rect3 {
  -webkit アニメーション遅延: -1.0 秒;
  アニメーション遅延: -1.0秒;
}

.スピナー.rect4 {
  -webkit アニメーション遅延: -0.9 秒;
  アニメーション遅延: -0.9秒;
}

.スピナー.rect5{
  -webkit アニメーション遅延: -0.8 秒;
  アニメーション遅延: -0.8秒;
}

@-webkit-keyframes sk-stretchdelay {
  0%、40%、100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: スケールY(1.0) }
}

@keyframes sk-stretchdelay {
  0%、40%、100% { 
    変換: スケールY(0.4);
    -webkit-transform: スケールY(0.4);
  } 20% { 
    変換: スケールY(1.0);
    -webkit-transform: スケールY(1.0);
  }
}

分析: spinner要素の下に 5 つの div 長方形要素があります。Y 軸のスケーリングが設定され、異なる遅延時間を使用して順次変更の効果を実現します。

html

<div class="spinner">
  <div class="cube1"></div>
  <div class="cube2"></div>
</div>

CS

.cube1, .cube2 {
  背景色: #333;
  幅: 15px;
  高さ: 15px;
  位置: 絶対;
  上: 0;
  左: 0;
  
  -webkit-animation: sk-cubemove 1.8s 無限イーズインアウト;
  アニメーション: sk-cubemove 1.8 秒 無限イーズインアウト;
}

.cube2 {
  -webkit アニメーション遅延: -0.9 秒;
  アニメーション遅延: -0.9秒;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: 回転(-360度) }
}

@keyframes sk-cubemove {
  25% { 
    変換: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    変換: translateX(42px) translateY(42px) 回転(-179度);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    変換: translateX(42px) translateY(42px) 回転(-180度);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    変換: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    変換: 回転(-360度);
    -webkit-transform: 回転(-360度);
  }
}

分析: 2 つのサブ要素が白い四角形を実装し、アニメーション属性を追加し、それぞれ X 軸と Y 軸の移動距離とスケーリングを設定し、異なる遅延時間で分離し、 rorateを使用して中心の周りの回転を実現します。

html

<div class="スピナー"></div>

CS

.スピナー{
  幅: 40px;
  高さ: 40px;
  マージン: 100px 自動;
  背景色: #333;

  境界線の半径: 100%;  
  -webkit-animation: sk-scaleout 1.0s 無限イーズインアウト;
  アニメーション: sk-scaleout 1.0s 無限イーズインアウト;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: スケール(0) }
  100% {
    -webkit-transform: スケール(1.0);
    不透明度: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: スケール(0);
    変換: スケール(0);
  } 100% {
    -webkit-transform: スケール(1.0);
    変換: スケール(1.0);
    不透明度: 0;
  }
}

分析: div要素のみで白い背景のドットを実現し、スケールと透明度を設定することで光の呼吸効果を実現しています。

html

<div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>

CS

.スピナー{
  マージン: 100px 自動;
  幅: 40px;
  高さ: 40px;
  位置: 相対的;
  テキスト配置: 中央;
  
  -webkit-animation: sk-rotate 2.0s 無限線形;
  アニメーション: sk-rotate 2.0s 無限線形;
}

.dot1、.dot2 {
  幅: 60%;
  高さ: 60%;
  表示: インラインブロック;
  位置: 絶対;
  上: 0;
  背景色: #333;
  境界線の半径: 100%;
  
  -webkit-animation: sk-bounce 2.0s 無限イーズインアウト;
  アニメーション: sk-bounce 2.0s 無限イーズインアウト;
}

.dot2 {
  上:自動;
  下部: 0;
  -webkit アニメーション遅延: -1.0 秒;
  アニメーション遅延: -1.0秒;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
  0%、100% { -webkit-transform: スケール(0.0) }
  50% { -webkit-transform: スケール(1.0) }
}

@keyframes sk-バウンス {
  0%、100% { 
    変換: スケール(0.0);
    -webkit-transform: スケール(0.0);
  } 50% { 
    変換: スケール(1.0);
    -webkit-transform: スケール(1.0);
  }
}

分析: 2 つの実線の円は、中心の周りを円形にスケーリングおよび回転する動作を実行しますが、遅延時間が異なるため、同時に反対のパフォーマンスを示します。

html

<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>

CS

.スピナー{
  マージン: 100px 自動 0;
  幅: 70ピクセル;
  テキスト配置: 中央;
}

.spinner > div {
  幅: 18px;
  高さ: 18px;
  背景色: #333;

  境界線の半径: 100%;
  表示: インラインブロック;
  -webkit-animation: sk-bouncedelay 1.4s 無限のease-in-out 両方;
  アニメーション: sk-bouncedelay 1.4s 無限のease-in-out 両方;
}

.スピナー .バウンス1 {
  -webkit アニメーション遅延: -0.32 秒;
  アニメーション遅延: -0.32秒;
}

.スピナー .バウンス2 {
  -webkit アニメーション遅延: -0.16 秒;
  アニメーション遅延: -0.16秒;
}

@-webkit-keyframes sk-bouncedelay {
  0%、80%、100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: スケール(1.0) }
}

@keyframes sk-バウンス遅延 {
  0%、80%、100% { 
    -webkit-transform: スケール(0);
    変換: スケール(0);
  } 40% { 
    -webkit-transform: スケール(1.0);
    変換: スケール(1.0);
  }
}

分析: 3 つの単色の円が水平に配置され、線形アニメーションscale 0 から 1 まで変化します。異なる遅延時間を設定すると、交互の効果が得られます。

html

<div class="sk-circle">
  <div class="sk-circle1 sk-child"></div>
  <div class="sk-circle2 sk-child"></div>
  <div class="sk-circle3 sk-child"></div>
  <div class="sk-circle4 sk-child"></div>
  <div class="sk-circle5 sk-child"></div>
  <div class="sk-circle6 sk-child"></div>
  <div class="sk-circle7 sk-child"></div>
  <div class="sk-circle8 sk-child"></div>
  <div class="sk-circle9 sk-child"></div>
  <div class="sk-circle10 sk-child"></div>
  <div class="sk-circle11 sk-child"></div>
  <div class="sk-circle12 sk-child"></div>
</div>

CS

.sk-circle {
  マージン: 100px 自動;
  幅: 40px;
  高さ: 40px;
  位置: 相対的;
}
.sk-circle .sk-child {
  幅: 100%;
  高さ: 100%;
  位置: 絶対;
  左: 0;
  上: 0;
}
.sk-circle .sk-child:before {
  コンテンツ： '';
  表示: ブロック;
  マージン: 0 自動;
  幅: 15%;
  高さ: 15%;
  背景色: #333;
  境界線の半径: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s 無限のease-in-out 両方;
          アニメーション: sk-circleBounceDelay 1.2s 無限のイーズインアウト 両方;
}
.sk-circle .sk-circle2 {
  -webkit-transform: 回転(30度);
      -ms-transform:回転(30度);
          変換: 回転(30度) }
.sk-circle .sk-circle3 {
  -webkit-transform: 回転(60度);
      -ms-transform:回転(60度);
          変換: 回転(60度) }
.sk-circle .sk-circle4 {
  -webkit-transform: 回転(90度)。
      -ms-transform:回転(90度);
          変換: 回転(90度) }
.sk-circle .sk-circle5 {
  -webkit-transform: 回転(120度);
      -ms-transform:回転(120度);
          変換: 回転(120度) }
.sk-circle .sk-circle6 {
  -webkit-transform: 回転(150度);
      -ms-transform:回転(150度);
          変換: 回転(150度); }
.sk-circle .sk-circle7 {
  -webkit-transform: 回転(180度);
      -ms-transform:回転(180度);
          変換: 回転(180度) }
.sk-circle .sk-circle8 {
  -webkit-transform:回転(210度);
      -ms-transform:回転(210度);
          変換: 回転(210度) }
.sk-circle .sk-circle9 {
  -webkit-transform: 回転(240度)。
      -ms-transform:回転(240度);
          変換: 回転(240度) }
.sk-circle .sk-circle10 {
  -webkit-transform: 回転(270度)。
      -ms-transform:回転(270度);
          変換: 回転(270度) }
.sk-circle .sk-circle11 {
  -webkit-transform: 回転(300度)。
      -ms-transform:回転(300度);
          変換: 回転(300度) }
.sk-circle .sk-circle12 {
  -webkit-transform: 回転(330度);
      -ms-transform:回転(330度);
          変換: 回転(330度) }
.sk-circle .sk-circle2:前 {
  -webkit アニメーション遅延: -1.1 秒;
          アニメーション遅延: -1.1秒; }
.sk-circle .sk-circle3:before {
  -webkit アニメーション遅延: -1 秒;
          アニメーション遅延: -1s; }
.sk-circle .sk-circle4:前 {
  -webkit アニメーション遅延: -0.9 秒;
          アニメーション遅延: -0.9秒; }
.sk-circle .sk-circle5:前 {
  -webkit アニメーション遅延: -0.8 秒;
          アニメーション遅延: -0.8秒; }
.sk-circle .sk-circle6:前 {
  -webkit アニメーション遅延: -0.7 秒;
          アニメーション遅延: -0.7秒; }
.sk-circle .sk-circle7:前 {
  -webkit アニメーション遅延: -0.6 秒;
          アニメーション遅延: -0.6秒; }
.sk-circle .sk-circle8:前 {
  -webkit アニメーション遅延: -0.5 秒;
          アニメーション遅延: -0.5秒; }
.sk-circle .sk-circle9:前 {
  -webkit アニメーション遅延: -0.4 秒;
          アニメーション遅延: -0.4秒; }
.sk-circle .sk-circle10:前 {
  -webkit アニメーション遅延: -0.3 秒;
          アニメーション遅延: -0.3秒; }
.sk-circle .sk-circle11:前 {
  -webkit アニメーション遅延: -0.2 秒;
          アニメーション遅延: -0.2秒; }
.sk-circle .sk-circle12:前 {
  -webkit アニメーション遅延: -0.1 秒;
          アニメーション遅延: -0.1秒; }

@-webkit-keyframes sk-circleBounceDelay {
  0%、80%、100% {
    -webkit-transform: スケール(0);
            変換: スケール(0);
  } 40% {
    -webkit-transform: スケール(1);
            変換: スケール(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%、80%、100% {
    -webkit-transform: スケール(0);
            変換: スケール(0);
  } 40% {
    -webkit-transform: スケール(1);
            変換: スケール(1);
  }
}

分析: 全体のローディング効果は 12 個の円の中心で構成されています。円形に見えるようにさまざまな回転が設定され、スケールを調整するためにさまざまな遅延時間が設定されます。

html

<div class="sk-cube-grid">
  <div class="sk-cube sk-cube1"></div>
  <div class="sk-cube sk-cube2"></div>
  <div class="sk-cube sk-cube3"></div>
  <div class="sk-cube sk-cube4"></div>
  <div class="sk-cube sk-cube5"></div>
  <div class="sk-cube sk-cube6"></div>
  <div class="sk-cube sk-cube7"></div>
  <div class="sk-cube sk-cube8"></div>
  <div class="sk-cube sk-cube9"></div>
</div>

CS

.sk-キューブグリッド{
  幅: 40px;
  高さ: 40px;
  マージン: 100px 自動;
}

.sk-キューブグリッド .sk-キューブ {
  幅: 33%;
  高さ: 33%;
  背景色: #333;
  フロート: 左;
  -webkit-animation: sk-cubeGridScaleDelay 1.3 秒、無限のイーズインアウト;
          アニメーション: sk-cubeGridScaleDelay 1.3 秒、無限のイーズインアウト; 
}
.sk-キューブグリッド .sk-キューブ1 {
  -webkit アニメーション遅延: 0.2 秒;
          アニメーション遅延: 0.2秒; }
.sk-キューブグリッド .sk-キューブ2 {
  -webkit アニメーション遅延: 0.3 秒;
          アニメーション遅延: 0.3秒; }
.sk-キューブグリッド .sk-キューブ3 {
  -webkit アニメーション遅延: 0.4 秒;
          アニメーション遅延: 0.4秒; }
.sk-キューブグリッド .sk-キューブ4 {
  -webkit-アニメーション遅延: 0.1秒;
          アニメーション遅延: 0.1秒; }
.sk-キューブグリッド .sk-キューブ5 {
  -webkit アニメーション遅延: 0.2 秒;
          アニメーション遅延: 0.2秒; }
.sk-キューブグリッド .sk-キューブ6 {
  -webkit アニメーション遅延: 0.3 秒;
          アニメーション遅延: 0.3秒; }
.sk-キューブグリッド .sk-キューブ7 {
  -webkit-アニメーション遅延: 0秒;
          アニメーション遅延: 0秒; }
.sk-キューブグリッド .sk-キューブ8 {
  -webkit アニメーション遅延: 0.1 秒;
          アニメーション遅延: 0.1秒; }
.sk-キューブグリッド .sk-キューブ9 {
  -webkit アニメーション遅延: 0.2 秒;
          アニメーション遅延: 0.2秒; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%、70%、100% {
    -webkit-transform: scale3D(1, 1, 1);
            変換: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            変換: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%、70%、100% {
    -webkit-transform: scale3D(1, 1, 1);
            変換: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            変換: scale3D(0, 0, 1);
  } 
}

分析: 9 つのブロックがgrid状に配置され、それぞれ水平方向と垂直方向に 3 つのブロックを形成します。異なる遅延時間を設定すると、線形 3D スケーリング動作が実行されます。

html

<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  <div class="sk-circle2 sk-circle"></div>
  <div class="sk-circle3 sk-circle"></div>
  <div class="sk-circle4 sk-circle"></div>
  <div class="sk-circle5 sk-circle"></div>
  <div class="sk-circle6 sk-circle"></div>
  <div class="sk-circle7 sk-circle"></div>
  <div class="sk-circle8 sk-circle"></div>
  <div class="sk-circle9 sk-circle"></div>
  <div class="sk-circle10 sk-circle"></div>
  <div class="sk-circle11 sk-circle"></div>
  <div class="sk-circle12 sk-circle"></div>
</div>

CS

.sk-フェーディングサークル{
  マージン: 100px 自動;
  幅: 40px;
  高さ: 40px;
  位置: 相対的;
}

.sk-フェーディングサークル .sk-サークル {
  幅: 100%;
  高さ: 100%;
  位置: 絶対;
  左: 0;
  上: 0;
}

.sk-フェーディングサークル .sk-circle:before {
  コンテンツ： '';
  表示: ブロック;
  マージン: 0 自動;
  幅: 15%;
  高さ: 15%;
  背景色: #333;
  境界線の半径: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s 無限のease-in-out 両方;
          アニメーション: sk-circleFadeDelay 1.2s 無限のイーズインアウト 両方;
}
.sk-フェーディングサークル .sk-circle2 {
  -webkit-transform: 回転(30度);
      -ms-transform:回転(30度);
          変換: 回転(30度);
}
.sk-フェーディングサークル .sk-circle3 {
  -webkit-transform: 回転(60度);
      -ms-transform:回転(60度);
          変換: 回転(60度);
}
.sk-フェーディングサークル .sk-circle4 {
  -webkit-transform: 回転(90度)。
      -ms-transform:回転(90度);
          変換: 回転(90度);
}
.sk-フェーディングサークル .sk-circle5 {
  -webkit-transform: 回転(120度);
      -ms-transform:回転(120度);
          変換: 回転(120度);
}
.sk-フェーディングサークル .sk-circle6 {
  -webkit-transform: 回転(150度);
      -ms-transform:回転(150度);
          変換: 回転(150度);
}
.sk-フェーディングサークル .sk-circle7 {
  -webkit-transform: 回転(180度);
      -ms-transform:回転(180度);
          変換: 回転(180度);
}
.sk-フェーディングサークル .sk-circle8 {
  -webkit-transform:回転(210度);
      -ms-transform:回転(210度);
          変換: 回転(210度);
}
.sk-フェーディングサークル .sk-circle9 {
  -webkit-transform: 回転(240度)。
      -ms-transform:回転(240度);
          変換: 回転(240度);
}
.sk-フェーディングサークル .sk-circle10 {
  -webkit-transform: 回転(270度)。
      -ms-transform:回転(270度);
          変換: 回転(270度);
}
.sk-フェーディングサークル .sk-circle11 {
  -webkit-transform: 回転(300度)。
      -ms-transform:回転(300度);
          変換: 回転(300度); 
}
.sk-フェーディングサークル .sk-circle12 {
  -webkit-transform: 回転(330度);
      -ms-transform:回転(330度);
          変換: 回転(330度); 
}
.sk-フェーディングサークル .sk-circle2:before {
  -webkit アニメーション遅延: -1.1 秒;
          アニメーション遅延: -1.1秒; 
}
.sk-フェーディングサークル .sk-circle3:before {
  -webkit アニメーション遅延: -1 秒;
          アニメーション遅延: -1秒; 
}
.sk-フェーディングサークル .sk-circle4:before {
  -webkit アニメーション遅延: -0.9 秒;
          アニメーション遅延: -0.9秒; 
}
.sk-フェーディングサークル .sk-circle5:before {
  -webkit アニメーション遅延: -0.8 秒;
          アニメーション遅延: -0.8秒; 
}
.sk-フェーディングサークル .sk-circle6:before {
  -webkit アニメーション遅延: -0.7 秒;
          アニメーション遅延: -0.7秒; 
}
.sk-フェーディングサークル .sk-circle7:before {
  -webkit アニメーション遅延: -0.6 秒;
          アニメーション遅延: -0.6秒; 
}
.sk-フェーディングサークル .sk-circle8:before {
  -webkit アニメーション遅延: -0.5 秒;
          アニメーション遅延: -0.5秒; 
}
.sk-フェーディングサークル .sk-circle9:before {
  -webkit アニメーション遅延: -0.4 秒;
          アニメーション遅延: -0.4秒;
}
.sk-フェーディングサークル .sk-circle10:before {
  -webkit アニメーション遅延: -0.3 秒;
          アニメーション遅延: -0.3秒;
}
.sk-フェーディングサークル .sk-circle11:before {
  -webkit アニメーション遅延: -0.2 秒;
          アニメーション遅延: -0.2秒;
}
.sk-フェーディングサークル .sk-circle12:before {
  -webkit アニメーション遅延: -0.1 秒;
          アニメーション遅延: -0.1秒;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%、39%、100% { 不透明度: 0; }
  40% { 不透明度: 1; }
}

@keyframes sk-circleFadeDelay {
  0%、39%、100% { 不透明度: 0; }
  40% { 不透明度: 1; } 
}

分析: 読み込みアニメーションは、360 度に広がる 12 個の単色のドットで構成され、順番に回転して透明度が変化します。

html

<div class="sk-folding-cube">
  <div class="sk-cube1 sk-cube"></div>
  <div class="sk-cube2 sk-cube"></div>
  <div class="sk-cube4 sk-cube"></div>
  <div class="sk-cube3 sk-cube"></div>
</div>

CS

.sk-折りたたみキューブ{
  マージン: 20px 自動;
  幅: 40px;
  高さ: 40px;
  位置: 相対的;
  -webkit-transform:rotateZ(45度);
          変換: rotateZ(45deg);
}

.sk-折りたたみキューブ .sk-キューブ {
  フロート: 左;
  幅: 50%;
  高さ: 50%;
  位置: 相対的;
  -webkit-transform: スケール(1.1);
      スケールを1.1に変更します。
          変換: スケール(1.1); 
}
.sk-折りたたみキューブ .sk-cube:before {
  コンテンツ： '';
  位置: 絶対;
  上: 0;
  左: 0;
  幅: 100%;
  高さ: 100%;
  背景色: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s 無限線形両方;
          アニメーション: sk-foldCubeAngle 2.4 秒 無限線形 両方;
  -webkit-transform-origin: 100% 100%;
      変換の原点を 100% に設定します。
          変換の原点: 100% 100%;
}
.sk-折りたたみキューブ .sk-キューブ2 {
  -webkit-transform: スケール(1.1)、Z軸回転(90度)。
          変換: スケール(1.1)、Z軸回転(90度);
}
.sk-折りたたみキューブ .sk-cube3 {
  -webkit-transform: スケール(1.1)、Z軸回転(180度)。
          変換: スケール(1.1)、Z軸回転(180度)。
}
.sk-折りたたみキューブ .sk-cube4 {
  -webkit-transform: スケール(1.1)、Z軸回転(270度)。
          変換: スケール(1.1)、Z軸回転(270度)。
}
.sk-折りたたみキューブ .sk-cube2:before {
  -webkit アニメーション遅延: 0.3 秒;
          アニメーション遅延: 0.3秒;
}
.sk-折りたたみキューブ .sk-cube3:before {
  -webkit アニメーション遅延: 0.6 秒;
          アニメーション遅延: 0.6秒; 
}
.sk-折りたたみキューブ .sk-cube4:before {
  -webkit アニメーション遅延: 0.9 秒;
          アニメーション遅延: 0.9秒;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%、10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            変換: 視点(140px) 回転X(-180deg);
    不透明度: 0; 
  } 25%、75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            変換: 視点(140px) 回転X(0deg);
    不透明度: 1; 
  } 90%、100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            変換: 視点(140px) Y方向回転(180度);
    不透明度: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%、10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            変換: 視点(140px) 回転X(-180deg);
    不透明度: 0; 
  } 25%、75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            変換: 視点(140px) 回転X(0deg);
    不透明度: 1; 
  } 90%、100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            変換: 視点(140px) Y方向回転(180度);
    不透明度: 0; 
  }
}

分析: 4 つの正三角形のブロックが正方形を形成し、45 度回転します。次に、各ブロックを異なる遅延時間で X 軸に沿って反転します。 perspectiveを設定することで3D効果を実現します。

結論: 上記のケースの原則は、異なる遅延時間を設定し、X、Y、Z 軸上で要素またはサブ要素を移動および回転し、スケーリングすることによってアニメーション効果を実現することです。これらの参照と創造性により、より多くのタイプ読み込み効果を作成できます。

CSS を使用してさまざまな Loading エフェクトを実現する方法とそれに伴う解析プロセスに関するこの記事はこれで終わりです。CSS を使用してさまざまな Loading エフェクトを実現する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JS を使用して HTML で回転するクリスマスツリーを実装する

>>:  MySQL でよく使用されるデータベースとテーブル シャーディング ソリューションの概要

推薦する

CSSスタイルのカスケーディングルールの詳細な説明

CSS スタイル ルール構文スタイルは、CSS の基本単位です。各スタイル ルールは、セレクターと宣...

CentOS 7.4 にソースコードから MySQL 8.0 をインストールするための詳細なチュートリアル

目次1. 環境2. 準備3. MySQL 8.0.11をインストールするMySQL 8 の公式バージ...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

JavaScript BOMの構成と一般的なイベントの詳細な説明

目次1. 部品2. BOMの構成2. ウィンドウオブジェクトの共通イベント1. ウィンドウ読み込みイ...

awk でのループの使用

同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...

docker に openjdk をインストールして jar パッケージを実行する方法

画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...

Unicode における CJK (中国語、日本語、韓国語の統合表意文字) 文字の概要

CJK は CJK Unified Ideographs の略称で、「中国語、日本語、韓国語の統一表...

ニューススタイルのウェブサイトデザイン例25選

bmi ボイジャーピッチフォークアルスター食料品店チャウ真/斜めポスタこれは偽のDIYですクリエイテ...

win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)

私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

HTML ページ ソース コード レイアウトの概要_Powernode Java Academy

HTML ページ ソース コード レイアウトの概要この紹介では、Google のホームページのソー...

jQuery エディタ プラグイン tinyMCE の使い方

簡略化されたファイル サイズを変更し、サンプルをダウンロードします。ファイルをローカル コンピュータ...

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...

HTML で水平ナビゲーション構造を設定する方法

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...