Web初心者がCSS マウスオーバーすると気持ちよくボタン画像が切り替わるを実装する方法(サンプル付き)

Web初心者がCSS マウスオーバーすると気持ちよくボタン画像が切り替わるを実装する方法(サンプル付き)
今回は、web初心者向けにマウスオーバーするとボタン画像がくるっと切り替わるCSSを実装します。

以前「Web初心者がjQuery マウスオーバーするとボタン画像がくるっと切り替わるを実装する方法(サンプル付き)」のjQueryでマウスオーバーさせるやり方を書きました。

photo credit: Auzigog via photopin cc

バンクーバーのうぇぶ屋

超有名なセナさんのブログ「バンクーバーのうぇぶ屋」のフッターに

マウスオーバー

マウスオーバーするとクルクル~って気持ちよく画像が動きます。
よく観察していると気が付くのですが

RSSのボタンをマウスオーバーすると、回っているときにdacebook、ツイッターの画像も回っているのに気が付きます。他のはてな、facebookなども同様に他の画像も一緒に回ってますね。

画像一枚

ボタン一つ一つ分けているのではなく、画像一枚でやっているんだなと思いました。
※実際には聞いていません。

ということで今回、画像一枚で気持ちよく回る動きを作ってみます。

画像準備

画像準備

今回左の縦長の画像を使っていきます。

画像一枚だと更新も簡単にできるので私としてはありがたいです。

HTMLを設置します STEP1

URLは使用するの環境に合わせてください。

CSSを書く STEP2

ここで注目するのは「CSS transition」です。

CSS transitionの説明

-webkit-transition-property

background-color、widthなどが指定できます。

-webkit-transition-duration

変化にかかる時間を設定ができます。 単位はsで指定します。

webkit-transition-timing-function

変化の仕方を設定できます。

  • ease:変化の仕方が滑らかになる
  • ease-in:変化がゆっくり始まる
  • ease-out:変化がゆっくり終る
  • ease-in-out:変化がゆっくり始まり、ゆっくり終る
  • linear:変化が最初から終わりまで一定

webkit-transition-delay

変化の始まり時間を設定できます。

まとめ

[サンプル] CSS マウスオーバーすると気持ちよくボタン画像が切り替わる

サンプルのソースをコピーしても画像が絶対パスではないのでご自身の環境で画像を用意して画像を差し替えるだけで動きます。

Web初心者がCSS マウスオーバーすると気持ちよくボタン画像が切り替わるを実装する方法(サンプル付き)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*