?導入

時間を伝えるだけではない時計を作りたいと思ったことはありますか?刻々と過ぎていくごとに、新たなテーマがもたらされるとしたらどうでしょうか? CSS @property と hsl() のカラー操作機能を使用すると、それが可能になります。この記事では、色 (別名テーマ) が毎秒変化し、各瞬間に新たな命を吹き込む、ダイナミックで視覚的に魅力的な「テーマ時計」の作成プロセスを説明します。

?️ コンセプト

「テーマクロック」のコンセプトは、時間の経過とともに時計の表情が変化するという、シンプルでありながら魅力的なものです。 CSS カスタム プロパティを利用して、色の色合い (度単位の角度です) をアニメーション化し、時計のテーマを毎秒 (分と時間ごとにも) 更新します。結果？機能的であると同時に魅惑的な、シームレスで常に変化する時計。

?デモとコード

さて、これが「テーマクロック」の完全なコードです。各部分が全体的な効果にどのように寄与しているかを理解するために、それを分析していきます。

?コードを分解する

1.CSS カスタム プロパティと @property: このテーマを変更する時計の背後にある魔法は、CSS カスタム プロパティと @property ルールの使用にあります。 hsl() 関数を使用して時計の色の色相を制御するカスタム プロパティ --angle を定義します。 @keyframes ルールを使用してこのプロパティを 60 秒間アニメーション化することで、連続的な色の遷移を実現します。

• カスタム プロパティ --angle: これは hsl() 色の色相を制御し、テーマを動的に変更します。また、カスタム プロパティをアニメーション化できるようにして、スムーズな遷移を可能にします。
• CSS @keyframes anim: このアニメーションは、色相の値を 60 秒かけて 0 から 360 まで回転させ、カラー スペクトル全体を循環させます。

2. テーマの動的切り替え: トグル ボタンを使用して、明るいテーマと暗いテーマを切り替えることができます。ボタンをクリックすると、HTML 要素のダーク クラスが切り替わり、時計の外観が変わります。

• ライト/ダーク モード切り替え: テーマは、時計の外観を動的に更新するボタンで切り替えることができます。
• コンテナ回転アニメーション: テーマが変わると時計コンテナが回転し、微妙なトランジション効果が追加されます。

3.時計と時間の更新: コードの JavaScript 部分は、時計の針とデジタル時間表示の更新を処理します。 setTime 関数は、時針、分針、秒針の位置を 1 秒ごとに再計算し、時刻と日付の表示を更新します。

• "scale" 関数: 現在時刻を時計の針の回転に対応する度数に変換します。

- リアルタイム更新: 時計の針とデジタル時刻は、現在時刻に合わせて毎秒更新されます。

?すべてのパーツを組み合わせる

CSS カスタム プロパティ、hsl() カラー操作、および @property ルールの力を組み合わせることで、時間を知らせるだけでなく、秒ごとに外観が進化する時計を作成しました。このプロジェクトは、CSS を使用して、最小限の JavaScript でインタラクティブで視覚的に魅力的な Web 要素を作成する方法を示す好例です。

いいね❤️をドロップして、フォローしてさらに詳しく alishata128