Fork
4
Fav
14
View
6051
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 74 lines
  • CSS 566 lines
2011.11.14
Firefox, iOS Safariに対応

+++++++++++++++++++++

2011.4.10

webkitのkeyframesを使ってのCSSだけで作ったストップウォッチ。
上の真ん中のボタンがSTART/STOP、右側のがRESET(STOP時のみ)。
-webkit-animation-play-state(削除検討中のプロパティらしい)で一時停止を実現。
START/STOP/RESETの切り替えはradioボタンの:checkedで。
あとChromeには一時停止して再び動かしたときに一瞬初期値に戻るバグ?があるようです。

Firefox4で表示だけはさせるようにしたい。

【追記】Firefox4でも表示できるように。一時停止はできないが30秒だけ動くように(transitionの最大が30秒だった)。
あと、スペックの低いネットブックで見たらコマ落ちしまくりでちょっと残念。

【追記】Sfariでボタンが上手く表示されてなかったのを修正。
同じwebkitでもchromeとsafariでは細かなところが違ったりしてて、そこらへんがまだちょっと未整理。
  • CSSでアナログストップウォッチ(作り込み版)
  • CSSでアナログストップウォッチ(作り込み版)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

ksk1015

Author

CSSerです。JSも好きです。 ブラウザ上の技術全般に興味があります。 詰めの甘いコード多いので参考にする際は要検証。

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

ginpeiginpei:

CSS3CSSプログラミング絵だけでもすごいのに、動くなんて。

Forked

sort by