CSS アーティファクト: 純粋な CSS を使用してインタラクティブな時計を作成する

CSS は、Web デザインとレイアウトに使用されるスタイルシート言語であり、最新の機能的な Web サイトを構築するための重要な構成要素です。この記事では、CSS を使用して楽しくて便利なサンプル、つまりインタラクティブな時計を作成する方法について説明します。

ステップ 1: HTML 構造

まず、CSS コードを格納する HTML 構造を作成する必要があります。この場合、時計を構築するために基本的な HTML 構造を選択します。

<!DOCTYPE html>
<html>
  <head>
    <title>CSS时钟示例</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="clock">
      <div class="hour-hand"></div>
      <div class="minute-hand"></div>
      <div class="second-hand"></div>
      <div class="center"></div>
    </div>
  </body>
</html>

1 つのクロック div と 4 つの div 要素を含む基本的な HTML 構造を作成しました。このうち、時針、分針、秒針の div 要素は時計の時針、分針、秒針を表示するために使用され、center div 要素は時計の中心点を配置するために使用されます。

ステップ 2: CSS スタイルのデザイン

次に、CSS スタイルを使用して時計のスタイルを設定します。CSS3 が提供する回転、変換、アニメーションのプロパティを使用して時計を作成します。

.clock {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin: 50px auto;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 
              inset 0 0 0 3px #FFF, 
              inset 0 0 5px rgba(0, 0, 0, 0.2), 
              0 2px 2px rgba(0, 0, 0, 0.1);
}
.hour-hand,
.minute-hand,
.second-hand {
  width: 50%;
  height: 6px;
  background: #333;
  position: absolute;
  border-radius: 10px;
  transform-origin: 100%;
  transform: rotate(90deg);
}
.hour-hand {
  background: #FFF;
  height: 8px;
  margin: -4px 0 0 -8%;
  transform-origin: 80%;
}
.minute-hand {
  margin: -3px 0 0 -6%;
  transform-origin: 70%;
}
.second-hand {
  margin: -1px 0 0 -5%;
  transform-origin: 60%;
}
.center {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.second-hand {
  animation: rotate 60s linear infinite;
}
.minute-hand {
  animation: rotate 3600s linear infinite;
}
.hour-hand {
  animation: rotate 43200s linear infinite;
}

上記の CSS コードは次のことを実現します。

スタイルやサイズなどの時計の形状のデザイン

.clock {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin: 50px auto;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 
              inset 0 0 0 3px #FFF, 
              inset 0 0 5px rgba(0, 0, 0, 0.2), 
              0 2px 2px rgba(0, 0, 0, 0.1);
}

時針、分針、秒針のデザイン

.hour-hand,
.minute-hand,
.second-hand {
  width: 50%;
  height: 6px;
  background: #333;
  position: absolute;
  border-radius: 10px;
  transform-origin: 100%;
  transform: rotate(90deg);
}

それぞれのポインター構造は異なり、それぞれが持つ文字は異なります。

.hour-hand {
  background: #FFF;
  height: 8px;
  margin: -4px 0 0 -8%;
  transform-origin: 80%;
}
.minute-hand {
  margin: -3px 0 0 -6%;
  transform-origin: 70%;
}
.second-hand {
  margin: -1px 0 0 -5%;
  transform-origin: 60%;
}

時計センターのデザイン

.center {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
}

キーフレーム属性の設計

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.second-hand {
  animation: rotate 60s linear infinite;
}
.minute-hand {
  animation: rotate 3600s linear infinite;
}
.hour-hand {
  animation: rotate 43200s linear infinite;
}

CSS クロックは完成しましたが、keyframes プロパティが何をするのかを知る必要があります。CSS では、キーフレームルールを使用して、アニメーションシーケンス内のオブジェクトの中間ステップをパーセンテージで表して定義します。

この例では、キーフレームを使用して「回転」というアニメーションシーケンスを作成します。各ポインターには、回転速度と持続時間を制御するための異なるアニメーションプロパティがあります。

ステップ 3: インタラクション効果

最後に、JavaScript コードを追加して対話機能を実装します。JavaScript スクリプトを使用して、ポインタの位置をリアルタイムで変更できるようになりました。

var hourHand = document.querySelector('.hour-hand');
var minuteHand = document.querySelector('.minute-hand');
var secondHand = document.querySelector('.second-hand');

function setDate() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  var hourDegrees = ((hours / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;

  var minuteDegrees = ((minutes / 60) * 360) + 90;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;

  var secondDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondDegrees}deg)`;
}

setInterval(setDate, 1000);

この例に含まれる JavaScript コードは、ポインターの回転角度に基づいて現在時刻を計算し、style.transformプロパティを使用してそれらを対応するポインターに適用します。さらに、setInterval メソッドを使用して、setDate 関数を定期的に実行します。

これらの手順を完了すると、ブラウザで時計がリアルタイムで実行されていることが確認できます。

結論は

CSS は、CSS3 プロパティとアニメーションを使用して、魅力的なインタラクティブな視覚効果を作成するための非常に強力なツールです。この時計の例は CSS の威力を示しており、JavaScript コードを使用するとさらに効果的に機能します。CSS を学習する過程で、興味深く実践的な例を見つけることは、学習に大きな利益をもたらします。

CSS についてさらに詳しく知りたい場合は、他の CSS チュートリアルと学習教材をお読みください。さまざまな CSS プロパティとテクニック、およびそれらを Web デザインに適用する方法をさらに習得するのに役立ちます。

CSS アーティファクト: 純粋な CSS を使用してインタラクティブな時計を作成する

おすすめ