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 の他の関連記事に注目してください。 |
推薦する
ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します
目次1. WeChat Payを開く1.1 アフィリエイト加盟店番号1.2 加盟店番号を追加する1....
JavaScript はパスワードボックスの入力検証を実装します
サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...
jQueryは、マウスをドラッグしてdivの位置とサイズを変更する方法を実装しています。
Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...
フロントエンドの vue+express ファイルのアップロードとダウンロードの例
新しいserver.jsを作成する糸初期化 -y 糸を追加エクスプレスノードモン -D var ex...
Vueナンバープレート検索コンポーネントの使い方の詳しい説明
参考までに、シンプルなナンバープレート入力コンポーネント（vue）です。具体的な内容は次のとおりです...
ソースコード分析からTomcatがサーブレットの初期化を呼び出す方法の詳細な説明
目次導入1. Tomcatを起動するコード2. Tomcatフレームワーク3. コンテナを作成する ...
Vue実戦記録のログインページの実装
目次1. 事前準備1.1 Node.jsをインストールする1.2 webpackをインストールする1...
Centos7 で yum を使用して Ceph 分散ストレージをインストールするチュートリアル
目次序文yumソース、epelソースを設定するCephソースの設定Cephとそのコンポーネントをイン...
Docker Compose ネットワーク設定の説明
基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...
CSS 境界線の半分または部分的に表示される実装コード
1. 疑似クラスを使用して境界線の半分を表示する <!DOCTYPE html> <...
データバインディングとリストデータの表示にはVue3を使用する
目次1. Vue2との比較1. Vue3の新機能2. Vue2とVue3の応答原理の比較3. 配列の...
Linux システムで tcpdump を使用してパケットをキャプチャする方法
まずサンプルコードを見てみましょう: 1. 共通パラメータ tcpdump -i eth0 -nn ...
mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...
CentOSにPHP+Apache+MySQLのサーバー環境をインストールして構築する
Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...
div画像マーキーシームレス接続実装コード
コードをコピーコードは次のとおりです。 <html> <ヘッド> <ス...