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

推薦する

MySQL の大きなテーブルで大量のデータを一括削除する方法

質問はhttps://www.zhihu.com/question/440066129/answer...

hasLayout によって発生する CSS バグの一覧

IE には長い間問題がありました。誰もがテストを受けたとき、誰もが笑顔でしたが、それはただのニヤニヤ...

1 つの記事で Vue ミドルウェア パイプラインを学ぶ

SPA を構築する場合、多くの場合、特定のルートを保護する必要があります。たとえば、認証されたユーザ...

純粋な CSS3 マインドマップ スタイルの例

マインドマップ彼はおそらく次のように見えるでしょう: インターネット上の実装のほとんどは d3.js...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

Vueは複数列レイアウトドラッグを実装します

この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...

CSS3は子供のころの紙飛行機を実現する

今日は折り紙飛行機（飛べる飛行機）を作ります基本的にすべてCSSで実装されており、JSはごく一部に過...

vue-cli 設定では Vuex の完全なプロセスレコードを使用します

目次序文インストールと使用方法モジュラー管理Vuex の状態永続性要約する序文Vue 開発では、ユー...

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...

一時ファイルを作成できないために MySQL が起動できない問題を解決する方法

問題の説明最近、仕事中に問題が発生しました。MySQL が起動に失敗しました。エラー ログは次のとお...

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...

Vue のスロットスコープの詳細な理解（初心者向け）

Baidu には slot-scope に関する記事が既にたくさんありますが、以前よく学習しておら...

スプライトとフォントアイコンを実装するためのCSS

スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...

after疑似要素を使用して中空の三角矢印とXアイコンを実装する例

フロントエンドのデザイン案では、「X」や「>」の形をした閉じるボタンや、他の 3 方向の白抜き...

Linux xargsコマンドの使用

1. 機能: xargs は、stdin 内のスペースまたは改行で区切られたデータをスペースで区切ら...