すべての秒にテーマを持たせましょう! ⏰ @property と hsl() を使用する

?導入

時間を知らせるだけではない時計を作りたいと思ったことはありますか?刻々と過ぎていくごとに、新たなテーマがもたらされるとしたらどうでしょうか? 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 関数は、時針、分針、秒針の位置を毎秒再計算し、時刻と日付の表示を更新します。

• 「スケール」関数: 現在時刻を時計の針の回転に対応する度に変換します。

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

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

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

---

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

以上がすべての秒にテーマを持たせましょう! ⏰ @property と hsl() を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。