[B! ロールオーバー] mypacecreatorのブックマーク

CSS3のtransitionプロパティでアニメーションをいろいろ作ってみる

CSS3のtransitionプロパティを使うとjavascriptを使わなくてもアニメーションの動きを付けられます。ちょっと以下に簡単なサンプルを作ってみたんで見てやってください。ちなみにIEで見ても何も面白い事はないです。色を変えるここにマウスを乗せると色が変わるよ。 .example1 { padding: 20px; color: #fff; background: #918c91; -moz-transition: 0.5s linear; -webkit-transition: 0.5s linear; transition: 0.5s linear; } .example1:hover { background: #f83b66; } 線を太くするここにマウスを乗せると線が太くなるよ。 .example2 { padding: 20px; color: #fff; ba

mypacecreator 2013/03/08

リンク

jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種

Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……）縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備はじめにボタンと