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 の他の関連記事に注目してください。 |
推薦する
Dockerボリューム権限管理の詳細な説明
ボリュームデータボリュームは Docker の重要な概念です。データ ボリュームは、1 つ以上のコン...
MySQL ファントムリードとその排除方法の詳細な説明
目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...
CSS の子要素を親要素と高い一貫性を持たせる方法
絶対位置決め方式: （１）親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
Angular 依存性注入の説明
目次概要1. 依存性注入2. Angularの依存性注入フレームワーク概要依存性注入: デザインパタ...
Dockerfile をベースに Zabbix 監視システムのコード例を作成する
forループを使用してZabbixイメージをコンテナにインポートします。 n を `ls *.tar...
MySQLクエリキャッシュの簡単な使い方の詳細な説明
目次1. クエリキャッシュの実装プロセス2. クエリキャッシュを構成する3. クエリキャッシュを有効...
UnityはMySQLに接続し、テーブルデータの実装コードを読み取ります
表は以下のとおりです。 Unity が読み取って呼び出すときのコード: データベース内の別のテーブル...
ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例
CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...
Jenkins初心者のためのDockerデプロイメントチュートリアルの詳細な説明
この記事では、docker 経由で Jenkins+Maven+SVN+Tomcat をデプロイし、...
SSH ポート転送、ローカル ポート転送、リモート ポート転送、動的ポート転送の詳細
パート 1 SSH ポート転送の概要カフェで無料Wi-Fiを利用しているとき、誰かがあなたのパスワー...
Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明
MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...
リモートDockerを使用した統合テスト環境の構築手順
需要背景チームには統合テストが必要であり、そのためには、mysql や rabbitmq などのミド...
MySQL データベース ターミナル - 一般的な操作コマンド コード
目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...
CSS3 は下部に固定されたフッターを実装します (ページの高さに関係なく常に下部にあります)
序文フッター領域を下部に固定します。ページの高さや幅に関係なく、モバイル メニューと同様に、フッター...