CSS3 で実装された 10 種類の読み込みアニメーションから 1 つを選んで実行してみませんか?

効果

html

<本文>
  <div class="content">
    <h3>CSS3 読み込みアニメーション</h3>
    <div class="load-wrapp">
      <div class="load-1">
        <p>読み込み中 1</p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-2">
        <p>読み込み中 2</p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-3">
        <p>読み込み中 3</p>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <!-- 境界半径と「破線」スタイルのため、Firefox では 4 の読み込みは機能しません。 -->
      <div class="load-4">
        <p>読み込み中 4</p>
        <div class="ring-1"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-5">
        <p>5 を読み込んでいます</p>
        <div class="ring-2">
          <div class="ボールホルダー">
            <div class="ボール"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-6">
        <p>6 を読み込んでいます</p>
        <div class="letter-holder">
          <div class="l-1 文字">L</div>
          <div class="l-2 letter">あ</div>
          <div class="l-3 letter">あ</div>
          <div class="l-4 letter">d</div>
          <div class="l-5 letter">私</div>
          <div class="l-6 letter">ん</div>
          <div class="l-7 letter">グ</div>
          <div class="l-8 letter">.</div>
          <div class="l-9 letter">.</div>
          <div class="l-10 letter">.</div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-7">
        <p>7 を読み込んでいます</p>
        <div class="square-holder">
          <div class="square"></div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-8">
        <p>読み込み中 8</p>
        <div class="line"></div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-9">
        <p>読み込み中 9</p>
        <div class="spinner">
          <div class="bubble-1"></div>
          <div class="bubble-2"></div>
        </div>
      </div>
    </div>
    <div class="load-wrapp">
      <div class="load-10">
        <p>10 を読み込んでいます</p>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</本文>

CSS3

/* -----------------------------------------
  =デモをより美しくするためのデフォルトのCSS
-------------------------------------------- */

体 {
  マージン: 0 自動;
  パディング: 20px;
  最大幅: 1200px;
  overflow-y: スクロール;
  フォントファミリ: "Open Sans"、サンセリフ;
  フォントの太さ: 400;
  色: #777;
  背景色: #f7f7f7;
  -webkit-font-smoothing: アンチエイリアス;
  -webkit-テキストサイズ調整: 100%;
  -ms-テキストサイズ調整: 100%;
}

。コンテンツ {
  パディング: 15px;
  オーバーフロー: 非表示;
  背景色: #e7e7e7;
  背景色: rgba(0, 0, 0, 0.06);
}

h1 {
  パディング下部: 15px;
  下境界線: 1px 実線 #d8d8d8;
  フォントの太さ: 600;
}

h1 スパン {
  フォントファミリー: 等幅、セリフ;
}

h3 {
  パディング下部: 20px;
  ボックスの影: 0 1px 0 rgba(0, 0, 0, 0.1), 0 2px 0 rgba(255, 255, 255, 0.9);
}

ｐ {
  マージン: 0;
  パディング: 10px 0;
  色: #777;
}

。クリア {
  クリア: 両方;
}

/* -----------------------------------------
  =CSS3 読み込みアニメーション
-------------------------------------------- */

/* =要素のスタイル
---------------------- */
.load-wrapp {
  フロート: 左;
  幅: 100ピクセル;
  高さ: 100px;
  マージン: 0 10px 10px 0;
  パディング: 20px 20px 20px;
  境界線の半径: 5px;
  テキスト配置: 中央;
  背景色: #d8d8d8;
}

.load-wrapp p {
  パディング: 0 0 20px;
}
.load-wrapp:最後の子{
  右マージン: 0;
}

。ライン {
  表示: インラインブロック;
  幅: 15px;
  高さ: 15px;
  境界線の半径: 15px;
  背景色: #4b9cdb;
}

.リング-1 {
  幅: 10px;
  高さ: 10px;
  マージン: 0 自動;
  パディング: 10px;
  境界線: 7px 破線 #4b9cdb;
  境界線の半径: 100%;
}

.リング-2 {
  位置: 相対的;
  幅: 45px;
  高さ: 45px;
  マージン: 0 自動;
  境界線: 4px実線 #4b9cdb;
  境界線の半径: 100%;
}

.ボールホルダー{
  位置: 絶対;
  幅: 12px;
  高さ: 45px;
  左: 17px;
  上: 0px;
}

。ボール {
  位置: 絶対;
  上: -11px;
  左: 0;
  幅: 16px;
  高さ: 16px;
  境界線の半径: 100%;
  背景: #4282b3;
}

.letter-holder {
  パディング: 16px;
}

。手紙 {
  フロート: 左;
  フォントサイズ: 14px;
  色: #777;
}

。四角 {
  幅: 12px;
  高さ: 12px;
  境界線の半径: 4px;
  背景色: #4b9cdb;
}

.スピナー{
  位置: 相対的;
  幅: 45px;
  高さ: 45px;
  マージン: 0 自動;
}

.バブル-1,
.バブル-2 {
  位置: 絶対;
  上: 0;
  幅: 25px;
  高さ: 25px;
  境界線の半径: 100%;
  背景色: #4b9cdb;
}

.バブル-2 {
  上:自動;
  下部: 0;
}

。バー {
  フロート: 左;
  幅: 15px;
  高さ: 6px;
  境界線の半径: 2px;
  背景色: #4b9cdb;
}

/* =アニメーション化
------------------------ */
.load-1 .line:n番目の最後の子(1) {
  アニメーション: loadingA 1.5秒 1秒 無限;
}
.load-1 .line:n番目の最後の子(2) {
  アニメーション: loadingA 1.5秒 0.5秒 無限;
}
.load-1 .line:n番目の最後の子(3) {
  アニメーション: loadingA 1.5s 0s 無限;
}

.load-2 .line:n番目の最後の子(1) {
  アニメーション: loadingB 1.5秒 1秒 無限;
}
.load-2 .line:n番目の最後の子(2) {
  アニメーション: loadingB 1.5秒 0.5秒 無限;
}
.load-2 .line:n番目の最後の子(3) {
  アニメーション: loadingB 1.5s 0s 無限;
}

.load-3 .line:n番目の最後の子(1) {
  アニメーション: loadingC 0.6s 0.1s 線形無限;
}
.load-3 .line:n番目の最後の子(2) {
  アニメーション: loadingC 0.6s 0.2s 線形無限;
}
.load-3 .line:n番目の最後の子(3) {
  アニメーション: loadingC 0.6s 0.3s 線形無限;
}

.load-4 .ring-1 {
  アニメーション: loadingD 1.5s 0.3s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限;
}

.load-5 .ball-holder {
  アニメーション: loadingE 1.3s 線形無限;
}

.load-6 .letter {
  アニメーション名: loadingF;
  アニメーション期間: 1.6秒;
  アニメーションの反復回数: 無限;
  アニメーション方向: 線形;
}

.l-1 {
  アニメーション遅延: 0.48秒;
}
.l-2 {
  アニメーション遅延: 0.6秒;
}
.l-3 {
  アニメーション遅延: 0.72秒;
}
.l-4 {
  アニメーション遅延: 0.84秒;
}
.l-5 {
  アニメーション遅延: 0.96秒;
}
.l-6 {
  アニメーション遅延: 1.08秒;
}
.l-7 {
  アニメーション遅延: 1.2秒;
}
.l-8 {
  アニメーション遅延: 1.32秒;
}
.l-9 {
  アニメーション遅延: 1.44秒;
}
.l-10 {
  アニメーション遅延: 1.56秒;
}

.load-7 .square {
  アニメーション: loadingG 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限大;
}

.load-8 .line {
  アニメーション: loadingH 1.5s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限大;
}

.load-9 .スピナー {
  アニメーション: loadingI 2s linear infinite;
}
.load-9 .bubble-1,
.load-9 .bubble-2 {
  アニメーション: バウンス 2 秒、イーズイン アウト 無限;
}
.load-9 .bubble-2 {
  アニメーション遅延: -1秒;
}

.load-10 .bar {
  アニメーション: loadingJ 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) 無限大;
}

@keyframes 読み込みA {
  0 {
    高さ: 15px;
  }
  50% {
    高さ: 35px;
  }
  100% {
    高さ: 15px;
  }
}

@keyframes 読み込みB {
  0 {
    幅: 15px;
  }
  50% {
    幅: 35px;
  }
  100% {
    幅: 15px;
  }
}

@keyframes 読み込みC {
  0 {
    変換: translate(0, 0);
  }
  50% {
    変換: translate(0, 15px);
  }
  100% {
    変換: translate(0, 0);
  }
}

@keyframes 読み込みD {
  0 {
    変換: 回転(0度);
  }
  50% {
    変換: 回転(180度);
  }
  100% {
    変換: 回転(360度);
  }
}

@keyframes 読み込みE {
  0 {
    変換: 回転(0度);
  }
  100% {
    変換: 回転(360度);
  }
}

@keyframes 読み込みF {
  0% {
    不透明度: 0;
  }
  100% {
    不透明度: 1;
  }
}

@keyframes 読み込みG {
  0% {
    変換: translate(0, 0) rotate(0deg);
  }
  50% {
    変換: translate(70px, 0) rotate(360deg);
  }
  100% {
    変換: translate(0, 0) rotate(0deg);
  }
}

@keyframes 読み込みH {
  0% {
    幅: 15px;
  }
  50% {
    幅: 35px;
    パディング: 4px;
  }
  100% {
    幅: 15px;
  }
}

@keyframes 読み込み中I {
  100% {
    変換: 回転(360度);
  }
}

@keyframes バウンス {
  0%、
  100% {
    変換: スケール(0);
  }
  50% {
    変換: スケール(1);
  }
}

@keyframes 読み込みJ {
  0%、
  100% {
    変換: translate(0, 0);
  }

  50% {
    変換: translate(80px, 0);
    背景色: #f5634a;
    幅: 25px;
  }
}

上記は CSS3 で実装された 10 個の読み込みアニメーションです。 1 つ選んで実行してください。 CSS3 読み込みアニメーションの詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

<<: よくある CSS のヒントと経験談 11 選

>>: HTML のインラインブロックの空白を素早く削除する 5 つの方法