CSS3 カウントダウン効果

CSS3 カウントダウン効果

成果を達成する

実装コード

html

<div クラス = 'ラッパー'>
  <div class='時間部分ラッパー'>
    <div class='time-part minutes tens'>
      <div class='数字ラッパー'>
        <span class='digit'>0</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='time-part minutes ones'>
      <div class='数字ラッパー'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
  <div class='時間部分ラッパー'>
    <div class='time-part seconds tens'>
      <div class='数字ラッパー'>
        <span class='digit'>0</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='time-part seconds ones'>
      <div class='数字ラッパー'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
  <div class='時間部分ラッパー'>
    <div class='time-part 100分の1 10'>
      <div class='数字ラッパー'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='time-part 100分の1'>
      <div class='数字ラッパー'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
</div>

CS

/* アニメーションの速度と緩急を調整して再生します */
/* ============================================== */
.数字{
  表示: インラインブロック;
  フォントサイズ: 200px;
  色: rgba(0, 0, 0, 0.25);
  高さ: 180ピクセル;
  行の高さ: 1;
}

.time-part-wrapper {
  表示: インラインブロック;
  右マージン: 50px;
  位置: 相対的;
}
.time-part-wrapper:not(:last-child):after {
  コンテンツ： "：";
  表示: ブロック;
  幅: 30ピクセル;
  高さ: 230px;
  位置: 絶対;
  上: 0px;
  右: -30px;
  色: rgba(0, 0, 0, 0.25);
  フォントサイズ: 200px;
  行の高さ: 0.9;
}

.time-part {
  幅: 140ピクセル;
  テキスト配置: 中央;
  高さ: 180ピクセル;
  オーバーフロー: 非表示;
  表示: インラインブロック;
  左マージン: -5px;
  ボックスのサイズ: 境界線ボックス;
}
.time-part .digit-wrapper {
  アニメーションタイミング関数: cubic-bezier(1, 0, 1, 0);
}
.time-part.minutes.tens .digit-wrapper {
  アニメーション名: minutes-tens;
  アニメーション期間: 3600秒;
  アニメーションの反復回数: 1;
}
.time-part.minutes.ones .digit-wrapper {
  アニメーション名: minutes-ones;
  アニメーション期間: 600秒;
  アニメーションの反復回数: 6;
}
.time-part.seconds.tens .digit-wrapper {
  アニメーション名: seconds-tens;
  アニメーション期間: 60秒;
  アニメーションの反復回数: 60;
}
.time-part.seconds.ones .digit-wrapper {
  アニメーション名: seconds-ones;
  アニメーション期間: 10秒;
  アニメーションの反復回数: 360;
}
.time-part.hundredths.tens .digit-wrapper {
  アニメーション名: 100分の1秒;
  アニメーション期間: 1秒;
  アニメーションの反復回数: 3600;
}
.time-part.hundredths.ones .digit-wrapper {
  アニメーション名: 100分の1;
  アニメーション期間: 0.1秒;
  アニメーションの反復回数: 36000;
}

@keyframes 分-10 {
  0% {
    変換: translateY(-180px);
  }
  16.66667%
    変換: translateY(-360px);
  }
  33.33333%
    変換: translateY(-540px);
  }
  50% {
    変換: translateY(-720px);
  }
  66.66667%
    変換: translateY(-900px);
  }
  83.33333%
    変換: translateY(-1080px);
  }
}
@keyframes 分-1 {
  0% {
    変換: translateY(-180px);
  }
  10% {
    変換: translateY(-360px);
  }
  20% {
    変換: translateY(-540px);
  }
  30% {
    変換: translateY(-720px);
  }
  40% {
    変換: translateY(-900px);
  }
  50% {
    変換: translateY(-1080px);
  }
  60% {
    変換: translateY(-1260px);
  }
  70% {
    変換: translateY(-1440px);
  }
  80% {
    変換: translateY(-1620px);
  }
  90% {
    変換: translateY(-1800px);
  }
}
@keyframes 秒-10 {
  0% {
    変換: translateY(-180px);
  }
  16.66667%
    変換: translateY(-360px);
  }
  33.33333%
    変換: translateY(-540px);
  }
  50% {
    変換: translateY(-720px);
  }
  66.66667%
    変換: translateY(-900px);
  }
  83.33333%
    変換: translateY(-1080px);
  }
}
@keyframes 秒-1 {
  0% {
    変換: translateY(-180px);
  }
  10% {
    変換: translateY(-360px);
  }
  20% {
    変換: translateY(-540px);
  }
  30% {
    変換: translateY(-720px);
  }
  40% {
    変換: translateY(-900px);
  }
  50% {
    変換: translateY(-1080px);
  }
  60% {
    変換: translateY(-1260px);
  }
  70% {
    変換: translateY(-1440px);
  }
  80% {
    変換: translateY(-1620px);
  }
  90% {
    変換: translateY(-1800px);
  }
}
@keyframes 100分の1～10分の1 {
  0% {
    変換: translateY(-180px);
  }
  10% {
    変換: translateY(-360px);
  }
  20% {
    変換: translateY(-540px);
  }
  30% {
    変換: translateY(-720px);
  }
  40% {
    変換: translateY(-900px);
  }
  50% {
    変換: translateY(-1080px);
  }
  60% {
    変換: translateY(-1260px);
  }
  70% {
    変換: translateY(-1440px);
  }
  80% {
    変換: translateY(-1620px);
  }
  90% {
    変換: translateY(-1800px);
  }
}
@keyframes 100分の1〜1 {
  0% {
    変換: translateY(-180px);
  }
  10% {
    変換: translateY(-360px);
  }
  20% {
    変換: translateY(-540px);
  }
  30% {
    変換: translateY(-720px);
  }
  40% {
    変換: translateY(-900px);
  }
  50% {
    変換: translateY(-1080px);
  }
  60% {
    変換: translateY(-1260px);
  }
  70% {
    変換: translateY(-1440px);
  }
  80% {
    変換: translateY(-1620px);
  }
  90% {
    変換: translateY(-1800px);
  }
}
体 {
  背景: #F1614B;
  マージン: 0;
  フォントファミリ: "Aldrich";
}

.ラッパー{
  マージン: 100px 自動;
  幅: 1000ピクセル;
  位置: 相対的;
}
.wrapper:before、.wrapper:after {
  コンテンツ： "";
  表示: ブロック;
  位置: 絶対;
  幅: 100%;
  左: 0;
  高さ: 20px;
  zインデックス: 10;
}
.wrapper:before {
  上: 0px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  背景サイズ: 100%;
  背景画像: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0)));
  背景画像: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  背景画像: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  背景画像: linear-gradient(下へ、#f1614b 0%、rgba(241, 97, 75, 0) 100%);
}
.wrapper:after {
  下: 0px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  背景サイズ: 100%;
  背景画像: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b));
  背景画像: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  背景画像: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  背景画像: linear-gradient(下へ、rgba(241, 97, 75, 0) 0%、#f1614b 100%);
}

上記は、CSS3 でカウントダウン効果を実現する方法の詳細です。CSS3 カウントダウンの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  表には表示したい境界コードが表示されます

>>:  IE5.0以降のHTCコンポーネントの定義の概要

推薦する

Windows での MySQL のダウンロード、インストール、設定、使用に関するチュートリアル

MySQLの概要MySQL はリレーショナル データベース管理システムです。データベースは構造化され...

JavaScript の for ループと二重 for ループの詳細な説明

forループfor ループは配列の要素をループします。文法： for (初期化変数; 条件式; 繰り...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

CSS でデジタル ページング効果のコードと手順を実装する方法

かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...

Apache ab同時負荷ストレステストの実装方法

腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...

HTML タグ マーキーはさまざまなスクロール効果を実現します (JS 制御なし)

ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...

解析を実装するためにPostgreSQLデータベースを書き込むSQLスクリプト関数

この記事は主に、PostgreSQL データベースを記述して解析を実装する SQL スクリプト関数を...

Centos7 に Zabbix3.0 をインストールするための非常に詳細な手順

序文最近、同社の業務の一部がコンピュータルームに移転し、ホストリソースの監視と管理をより便利に行うた...

CentOS7環境にMySQL5.5データベースをインストールする

目次1. 現在のシステムにMySQLがインストールされているかどうかを確認する2. インストールされ...

MySQL で複数の主キーが定義されているエラーの解決方法

主キーを作成するには 2 つの方法があります。 テーブルテーブル名を作成（ フィールド名タイプ、 フ...

Linuxのファイルとフォルダの権限を操作する方法

Linux のファイル権限まず、現在のディレクトリ内のファイルの内容を確認しましょう。 ls -l ...

yum を使用して rpm と関連する依存関係をダウンロードして、docker をオフラインでインストールします。

yum を使用してすべての依存関係を一緒にインストールできますが、–downloadonly –d...

Centos8 システムの VMware インストール チュートリアル図 (中国語グラフィカル モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル

1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...

VMware 仮想マシン ブリッジ モードでインターネットにアクセスできない問題を解決する方法

ステップ1: ローカルイーサネットプロパティをチェックして、VMwareブリッジプロトコルがインスト...