HTML・CSS・JSでアナログ時計をつくってみた

【HTML・CSS・JS】アナログ時計【ちゃんと動くよ】

突然思い立って、アナログ時計を作ってみました。

See the Pen 【HTML・CSS・JS】アナログ時計【ちゃんと動くよ】 by あお@仕事募集中のWebコーダー🐾 (@coder_ao) on CodePen.

JSで現在の時間を取得して、時計の針に反映しています。

時計のフレームと基盤(ベース?)にbackground-blend-modeを使用してニュアンス付けもしてみたので雰囲気出てる…と思います!(笑)

後は時計の針を画像にして可愛くするのもありかなーなんて思います。

意外と苦戦したのが文字盤の配置で、最初は目分量で置いていたのですが(なんでそうしようと思ったんだろう…)、ローマ数字にしたおかげで目の錯覚もあり正しい位置に配置できず…(^_^;)

最終的に計算して配置しました!(最初からそうすればよかった…w

お役立ていただけ…るかは謎ですが(笑)、参考になれば嬉しいです(*^^*)