2011-07-01 10 views
1

HTML5/javascriptを使用してボタンを押したときにボタンをアニメートする方法があるのでしょうか?プレス上のアニメーションhtml5ボタン

私は、ほとんど漫画のボタンを作成したいと思います。私はちょっとガウディのような音がしますが、最終的な結果は聞こえるほど良く見えると思います。

私のインスピレーションは?新しいスーパーマリオブラザーズのゲームのブロック。

答えて

2

あなたが探しているものはHTML5ではなくCSS3によって作成されています。

ここにはCSS3を使ってあらゆる種類のクールなボタンを作成するための10種類のチュートリアルへのリンクがあるブログ記事があります:http://www.catswhocode.com/blog/top-10-css3-buttons-tutorials

ボタンの多くは、:ホバーセレクタを使用してロールオーバーすると展開されます。押されたときにスタイルを適用するには、代わりに:アクティブセレクタを代わりに使用します。

希望すると、これが始まります。

+0

リンクありがとうございました。これはすばらしい見た目のボタンです。私は彼らが何ができるかを見るために彼らを読む必要があります。しかし、表面上では、彼らのほとんどは、彼らが持っているだけで、上下の状態のように見えます。私は約6-10フレーム程度のアニメーションを行う方法を探しています。私はスターを飛ばして、それを押してから、ボタンを押すと戻ってくることができるようにしたい。私が言ったようにプラスは、あなたがそれを押すと、枕のようにボタンを少し広げるようにします。たぶんそれらのチュートリアルのいくつかはそれを行うことができます。しかし、私はフラッシュの外で考えているようなものは見ていない。 – roxics

+1

話題の中には、CSS3アニメーションが必要なものがあります。あなたが描いたものはまったく見たことがありませんが、ここにCSSアニメーションを使用するボタンがいくつかあります:http://www.zurb.com/playground/radioactive-buttons http://www.webrisorsa.info/animated-effects-on -buttons-with-pure-css3/362/ – Gaurav

+0

リンクありがとうございます。その最初のリンクは、私が探しているものに確実に近づいています。 私は私が何をする必要があるのか​​分かったかもしれないと思う。私は2つの異なるGIF画像が必要だと信じています。 1つは固体で、もう1つはアニメートされています。それから私は、クリックしたときにCSS3またはjavascriptで2つの間を切り替えるだけです。基本的にボタンは堅実に始まり、次にクリックするとアニメーションGIFが一回再生され、別の色になっているソリッドGIFまたはソリッドGIFに戻り、ボタンが既にクリックされていることを示します。 – roxics

関連する問題