CSSのrotationを使ったアナログ&デジタル時計実装例
2010年02月23日-
スポンサード リンク
Jon Combe | Code | HTML clocks using JavaScript and CSS rotation
次のような、CSSのrotationを使ったアナログ&デジタル時計実装例が公開されています。
Flashっぽいのですが、Flashは一切使っていません。
左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。
こういうことも出来るんだ、ということで一度見ておいてもよさそうです。
実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
このプロパティがなかったらかなり大変そうですが、これらが使えれば楽々というわけですね。
但し、IEでは動かない点に注意。
次のような、CSSのrotationを使ったアナログ&デジタル時計実装例が公開されています。
Flashっぽいのですが、Flashは一切使っていません。
左のアナログ時計もいいのですが、右のデジタル時計も前後の分と秒が若干rotateされて表示されてるのがクールですね。
こういうことも出来るんだ、ということで一度見ておいてもよさそうです。
実装ですが、JavaScript によって次のようにCSSのrotateプロパティをsetIntervalで定期的にあてていってるだけのようです。
-webkit-transform: rotate(42deg);
-moz-transform: rotate(42deg);
このプロパティがなかったらかなり大変そうですが、これらが使えれば楽々というわけですね。
但し、IEでは動かない点に注意。
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ