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 つの方法

推薦する

Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする

MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...

webpackのモバイル適応ソリューションの概要

目次レムフォルクスワーゲンサードパーティのUIフレームワークに適応する結論モバイル開発における最も一...

Linux環境にRedisをデプロイし、Dockerにインストールする方法

インストール手順1. Redisをインストールするdocker search redis和docke...

jQuery はパーセンテージスコアリングの進捗バーを実装します

この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...

Vueはシンプルな計算機能を実装します

この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...

Linux でシステム ディスクを初期化した後にデータ ディスクを再マウントする方法

Linuxインスタンスでシステムディスクを初期化した後、データディスクを再マウントするLinux イ...

WeChatアプレットはふるいを振る効果を実現

この記事では、WeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおり...

docker で zabbix_agent をデプロイする方法

zabbix_agent のデプロイメント:推奨事項: zabbix_agent は docker-...

CSS 背景画像を設定するための 6 つの興味深いヒント

background-image は、おそらくすべてのフロントエンド開発者がキャリアの中で少なくとも...

HTMLファイル内の中国語の文字化けとブラウザでの表示の問題

今日も私のページが文字化けしていたので、インターネットで関連する問題を検索しました。この方法はかなり...

jQueryはキャンバスタグを使用して検証コードを描画します

<canvas> 要素は、クライアント側のベクター グラフィックス用に設計されています。...

2019 年に最も役立ち重要なオープンソース ツール トップ 10

Black Duck の 2017 年のオープンソース調査では、回答者の 77% がオープンソース...

Reactはラジオコンポーネントのサンプルコードを実装します

この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...

Nginxドメイン名転送の実装

Nginx の紹介Nginx (「エンジン x」) は、ロシアのプログラマー Igor Sysoev...

JavaScript バブルソートの例

目次1. バブルソートとは何か2. 例を挙げるラウンド1:第2ラウンド:第3ラウンド:第4ラウンド:...