コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSで時刻を設定する方法

CSSで時刻を設定する方法

PHPz
リリース： 2023-04-24 09:26:27
オリジナル
1584 人が閲覧しました

CSS (Cascading Style Sheets) は、Web ページのスタイル設計に使用される言語であり、Web デザインにおいて非常に重要な役割を果たします。 CSS は、Web ページのスタイルやレイアウトに役割を果たすだけでなく、Web ページにさまざまな一時的な効果やアニメーションを簡単に設定することもできます。この記事ではCSSを使って時間に関するエフェクトを設定する方法を詳しく紹介します。

1. CSS 時計効果

時計は、通常、さまざまな Web サイトやアプリケーションに適用される時間効果です。 CSS を使用すると、美しいだけでなく正確な時計効果を作成できます。シンプルな時計スタイルを作成する方法のコード例を次に示します。

HTML コード: 

<div class="clock">
  <div class="hour"></div>
  <div class="minute"></div>
  <div class="second"></div>
</div>
ログイン後にコピー

CSS コード: 

.clock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.hour {
  width: 6px;
  height: 50px;
  background-color: #000;
  position: absolute;
  left: calc(50% - 3px);
  top: calc(50% - 50px);
  transform-origin: bottom center;
  transform: rotate(90deg);
}
.minute {
  width: 4px;
  height: 80px;
  background-color: #000;
  position: absolute;
  left: calc(50% - 2px);
  top: calc(50% - 80px);
  transform-origin: bottom center;
  transform: rotate(180deg);
}
.second {
  width: 2px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% - 100px);
  transform-origin: bottom center;
  transform: rotate(270deg);
  animation: move 60s linear infinite;
}
@keyframes move {
  0% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(630deg);
  }
}
ログイン後にコピー

上記のコードでは、div タグを割り当てました。 . Clock クラスに追加することで時計の外枠となります。 hour、minute、second クラスは、それぞれ時針、分針、秒針を表示するために使用されます。 CSS の position プロパティと transform プロパティを使用すると、これらを簡単に正しい位置に配置し、回転させて現在の時刻を表示することができます。さらに、CSS アニメーションを使用して、秒針を滑らかに動かすことができます。

2. カウントダウン効果を実現するCSS

カウントダウン効果は、Webページの商品特売カウントダウンやイベント終了時間のカウントダウンなど、さまざまな場面で広く使われています。 CSS を使用すると、このカウントダウン効果を Web サイトに簡単に追加できます。以下は、CSS を使用してカウントダウン効果を設定するコード例です。

HTML コード: 

<div class="countdown">
  <div class="days">00</div>
  <div class="hours">00</div>
  <div class="minutes">00</div>
  <div class="seconds">00</div>
</div>
ログイン後にコピー

CSS コード: 

.countdown {
  font-family: monospace;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
.countdown div {
  width: 60px;
  height: 60px;
  margin: 0 10px;
  border-radius: 10px;
  background-color: #fff;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
ログイン後にコピー

上記のコードでは、## を使用します。 # カウントダウン番号を表すタグ。 CSS の display プロパティと flex プロパティ値を使用して、これらの数値要素を行に配置します。

タグの幅と高さを設定することで、数値要素のサイズを簡単に変更できます。 background-color プロパティによる背景色の変更や、CSS ボックス モデルの box-shadow プロパティを使用した影効果の追加など、デジタル要素のスタイル設定。

3. CSS を使用してちらつき効果とアニメーション効果を作成する

現在導入されている時計効果やカウントダウン効果に加えて、CSS はちらつき、スケーリング、回転と色が変わります。お待ちください。以下に、CSS を使用して特定の時間効果を実現する例をいくつか示します。

    CSS 点滅効果
点滅効果は、Web サイト上の特定の要素を強調するためによく使用されます。

アニメーション属性とキーフレームを使用すると、テキストや画像にちらつき効果を簡単に追加できます。以下は、単純な CSS フラッシュ効果コードの例です。

HTML コード: 

<h1 class="blink">Hello World!</h1>
ログイン後にコピー
CSS コード: 

.blink {
  animation: blink 1s linear infinite;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
ログイン後にコピー
上記のコードでは、

タグと .blink クラスはテキスト要素の作成に使用され、CSS の animation プロパティと @keyframes ルールはテキスト要素を点滅させるために使用されます。 @keyframes ルールでは、テキスト要素のアニメーション効果を 100% の不透明度、50% の不透明度、100% の不透明度まで定義します。

    CSS アニメーション効果
CSS では、キーフレームと

animation プロパティを使用して、さまざまな複雑なアニメーションを作成することもできます。簡単な CSS アニメーションの例を次に示します。

HTML コード: 

<div class="animated">
  <img src="image.jpg">
</div></p>CSS コード: <p></p>
<pre class="brush:php;toolbar:false">.animated {
  animation: animated 2s ease-out;
}
@keyframes animated {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.5) rotate(45deg);
  }
  50% {
    transform: scale(0.5) rotate(-45deg);
  }
  75% {
    transform: scale(1.2) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
ログイン後にコピー
上記のコードでは、

タグと .animated クラスを使用して画像を含む要素を作成し、CSS animation プロパティと @keyframes ルールを使用して要素のアニメーションを作成します。 @keyframes ルールでは、要素の通常の比率から 45 度回転による拡大、縮小して元の比率に戻るまでの遷移を定義します。

CSS では、さまざまなプロパティと値を使用して、時間関連の効果やアニメーションを設定できます。この記事で紹介した例が創造性を発揮し、素晴らしい時間効果やさまざまなアニメーション効果を Web サイトに追加するのに役立つことを願っています。

以上がCSSで時刻を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn
前の記事：JavaScript で素数を見つけるアルゴリズムは何ですか? 次の記事：CSS コメント記号の目的について話し合う
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2159
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2310
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1947
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1821
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1875
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート