Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

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

投稿日:

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

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

photo credit: Auzigog via photopin cc

バンクーバーのうぇぶ屋

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

マウスオーバー

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

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

画像一枚

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

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

画像準備

画像準備

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

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

HTMLを設置します STEP1

<ul class="sns">
<li class="facebook"><a href="https://www.facebook.com/Sedoriplan" target="_blank">facebook</a></li>
<li class="hatena"><a href="http://b.hatena.ne.jp/" target="_blank">hatena</a></li>
<li class="twitter"><a href="https://twitter.com/tonton1104" target="_blank">ツイッター</a></li>
<li class="mixi"><a href="http://mixi.jp/" target="_blank">ミクシィー</a></li>
</ul>

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

CSSを書く STEP2

li{
	list-style-type: none;
	float: left;
	}
	
ul.sns li{
    margin-right: 8px;
    overflow: hidden;
    width: 49px;
}

ul.sns li a{
	background: url(images/011/button.png) no-repeat;
    display: block;
    height: 49px;
	text-indent: -9999px;
}

ul.sns li.facebook a {
    background-position: 0px -196px;	
}

ul.sns li.facebook a:hover {
    background-position: 0px 0px;
    transition: all 0.5s ease 0s;
}

ul.sns li.hatena a {
    background-position: 0px -245px;	
}

ul.sns li.hatena a:hover {
    background-position: 0px -49px;
    transition: all 0.5s ease 0s;
}

ul.sns li.twitter a {
    background-position: 0px -294px;	
}

ul.sns li.twitter a:hover {
    background-position: 0px -98px;
    transition: all 0.5s ease 0s;
}

ul.sns li.mixi a {
    background-position: 0px -343px;	
}

ul.sns li.mixi a:hover {
    background-position: 0px -147px;
    transition: all 0.5s ease 0s;
}

li.btn img{
	border: none;
}

ここで注目するのは「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サイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.