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 でよく使用されるデータベースとテーブル シャーディング ソリューションの概要

推薦する

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

MySQL のデッドロック チェックとデッドロック除去の例の詳細な説明

1. クエリプロセスプロセスリストを表示2. 対応するプロセスを照会し、IDを強制終了します。検証（...

Windows 上で Nginx+Tomcat クラスタを実装するプロセスの分析

導入： Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...

Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析

1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

MySQL 5.7 の一時テーブルスペースを使用して落とし穴を回避する方法

導入MySQL 5.7 は、SSL/TLS と全体的なセキュリティ開発におけるいくつかの重要な変更に...

コンテナDockerCommitを介してイメージを送信し、DockerPushでイメージをプッシュします。

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

MySQL 圧縮の使用シナリオとソリューション

導入圧縮トランスポート プロトコル、圧縮列ソリューション、圧縮テーブル ソリューションなど、MySQ...

MySQL REVOKE でユーザー権限を削除する

MySQL では、REVOKE ステートメントを使用してユーザーの特定の権限を削除できます (ユーザ...

Mysql8.0はソート問題を解決するためにウィンドウ関数を使用する

MySQL ウィンドウ関数の紹介MySQL は MySQL 8.0 以降、ウィンドウ関数をサポートし...

Mysql ファジークエリが大文字と小文字を区別するかどうかの詳細な調査

序文最近、私は小さな個人ブログ プロジェクトを書くのに忙しくしています。 「グローバル検索」機能を実...

mysql 5.6.21 のインストールと設定の詳細な手順

1. 概要MySQL バージョン: 5.6.21ダウンロードアドレス: https://dev.my...

MySQL スロークエリ: スロークエリを有効にする

1. スロークエリの用途は何ですか? long_query_time を超えて実行されるすべての S...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...