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コンポーネントの定義の概要

推薦する

Vue が Ref を使用してレベル間でコンポーネントを取得する手順

VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...

MySQLデータベースを作成し、中国語の文字をサポートする方法

まずMySQLの公式ドキュメントを見てみましょう: 5.7 {データベース | スキーマ} を作成 ...

HTML onfocus gain focus および onblur lose focus イベントの詳細な説明

HTML onfocus イベント属性定義と使用法onfocus 属性は、要素がフォーカスを受け取っ...

jQueryのチェーンプログラミングスタイルの詳細な例

チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...

MySQLで日付を比較する方法の詳細な説明

データ型が datetime であるフィールド add_time を持つテーブル product が...

LinuxベースのLVMシームレスディスク水平拡張の詳細な説明

環境名前財産CPU 5650 円メモリ4Gディスク20G+4TB この時点で、サーバーにはすでに次の...

WeChatミニプログラムでの仮想リストの実装例

目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

HTML のフォームフォームのメソッド属性の紹介

1 メソッドは、データをサーバーに送信する方法を指定するプロパティです。 2 post と get ...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方（１...

nginx のロケーションで URI の傍受を実装する方法

例:場所のルートとエイリアスルートディレクティブは、ルートによって設定されたディレクトリに検索ルート...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

MYSQLはUnionを使用して2つのテーブルのデータを結合し、表示します。

UNION演算子の使用union : 2 つ以上の SELECT ステートメントの結果を 1 つの...

MySQL ファントムリードとその排除方法の詳細な説明

目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...

更新SQL文に基づくMySQLロックの理解

序文MySQL データベース ロックは、データの一貫性を実現し、同時実行性の問題を解決するための重要...