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

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);
}

p {
  マージン: 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 つの方法

推薦する

JavaScript で同時実行制御を実装する方法

目次1. 同時実行制御の概要1.1 フェーズ1 1.2 フェーズ2 1.3 フェーズ3 2. 同時実...

CSS3は水平方向の中央揃え、垂直方向の中央揃え、水平方向と垂直方向の中央揃えのサンプルコードを実装しています。

フロントエンドの担当者であれば、面接でも仕事中でも、「CSS を使用して中央揃えにする」という効果に...

Tomcat プロジェクトを展開する一般的な方法のいくつか [テスト済み]

1 / Webプロジェクトファイルをwebappsディレクトリに直接コピーするこれは最も一般的に使...

MySQLで行または列をソートする方法

方法:説明: どちらも達成できません:方法1: sp_product から sp.productid...

入力ボックスのオートコンプリート機能をオフにする

これで、autocomplete と呼ばれる input の属性を使用できるようになりました。オート...

docker を使用して複数のネットワーク インターフェースを持つコンテナーを起動する方法の例

コンテナにネットワークインターフェースを追加する1 デフォルトのネットワークモードでコンテナを実行す...

要素テーブルヘッダー行の高さの問題の解決

目次序文1. 問題の原因2. 解決策VueはelementUIテーブルtr thの高さと背景色を変更...

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

vagrant+virtualBoxで仮想マシンを構築する方法

1. はじめにVagrant は、仮想マシン (VirtualBox) を構築および管理するためのツ...

Linux クラウド サーバーに JDK と Tomcat をインストールするための詳細な手順 (推奨)

JDKをダウンロードしてインストールするステップ 1: まず、公式 Web サイト http://...

MYSQL における char と varchar の違い

CHAR 型と VARCHAR 型は似ていますが、主に格納場所、末尾のスペース、取得方法が異なります...

Vueは買い物数量を変更できるショッピングカートを実装します

この記事では、Vueを使用してショッピングカートの数量を変更する方法を紹介します。具体的な内容は次の...

Docker で FastDFS ファイル システムを構築する (マルチイメージ チュートリアル)

目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...