menu
menu

キーワード検索

 

最近の投稿

CSSだけでアニメーションするリンクボタン

  • Labs

CSS3

こんにちは(・∀・)

以前投稿しました「CSS3のtransitionプロパティで簡単エフェクト」と前回投稿しました「CSSだけでアニメーションするリンクボタン」はCSSで制御するという内容が一緒なのでページを「CSSだけでアニメーションするリンクボタン」に統合します。

今回新たにサンプルも一つ追加しましたので、さらにご活用いただければと思います。

ところで、transitionプロパティはCSS3なのでベンダープレフィックスは必要?!

と考えそうなところですが、現在主要なブラウザではtransitionプロパティでベンダープレフィックスを使う必要はないようです。次のリンク先をご確認ください。

http://caniuse.com/

サンプルの動作確認はページの読み込みが終わってからお試しください。

1. テキストリンクの文字色を変更

マウスオーバー・マウスアウトでテキストリンクの文字色をゆっくりスムースに変更させます。

サンプルデモ

こんにちは!Webデザインラボです。

HTML

<p class="demo1">こんにちは!<a href="/">Webデザインラボ</a>です。</p>
CSS

.sample-demo .demo1 a {
	font-weight: bold;
	color: #4776AF;
	transition: 0.5s;
}
.sample-demo .demo1 a:hover {
	color: #d577ab;
}

テキストリンクの文字色をマウスオーバー・マウスアウトでゆっくり変更させてますが、テキストだとわかりづらいかもしれません。しかしボタンにすると...

2. リンクボタンの色を変更

マウスオーバー・マウスアウトでリンクボタンの色をスムースに変更させます。

サンプルデモ
HTML

<div class="demo2">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
CSS

.sample-demo .demo2 {
	width: 400px;
	margin: 0 auto;
}
.sample-demo .sample-demo .demo2 li {
	display: block;
	float: left;
	margin-right: 1px;
}
.sample-demo .demo2 li a {
	display: block;
	width: 99px;
	height: 40px;
	text-align: center;
	color: #fff;
	background: #9fb7d4;
	transition: 0.5s;
}
.sample-demo .demo2 li a:hover {
	background: #afc6e2;
}

ボタンにするとわかりやすいですね。マウスオーバー・マウスアウトでボタンの色がスムースに変更しました。

3. ボタンのサイズを変更

マウスオーバー・マウスアウトでボタンのサイズをスムースに変更させます。

サンプルデモ
HTML

<div class="demo3">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
CSS

.sample-demo .demo3 {
	width: 420px;
	height: 50px;
	margin: 0 auto;
}
.sample-demo .demo3 li {
	display: block;
	float: left !important;
	margin-right: 1px;
}
.sample-demo .demo3 li a {
	display: block;
	width: 99px;
	height: 40px;
	text-align: center;
	color: #fff;
	background: #9fb7d4;
	transition: 0.5s;
}
.sample-demo .demo3 a:hover {
	padding: 5px;
	background: #afc6e2;
}

マウスオーバー・マウスアウトでボタンのサイズがスムースに変更します。親要素でサイズが変更する分のマージンを取らないと、サイズを変更するボタン要素以外も影響を受けますので注意が必要です。

4. ボタンのサイズを変更

マウスオーバー・マウスアウトでボタンのサイズをスムースに、他の要素に影響を与えることなく変更させます。

サンプルデモ
HTML

<div class="demo4">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</div>
CSS

.sample-demo .demo4 {
	position: relative;
	overflow: hidden;
	width: 420px;
	height: 60px;
	margin: 0 auto;
}
.sample-demo .demo4 ul {
	width: 400px;
	height: 40px;
	padding: 10px !important;
}
.sample-demo .demo4 li {
	display: block;
	float: left !important;
	text-align: center;
	margin-right: 1px;
}
.sample-demo .demo4 li:last-child {
	margin-right: 0;
}
.sample-demo .demo4 li a {
	display: block;
	width: 99px;
	height: 40px;
	color: #fff;
	background: #9fb7d4;
	transition: 0.5s;
}
.sample-demo .demo4 li a:hover {
	transform: scale(1.2,1.2);
}

hoverした時にpaddingでサイズを変更していたのをscaleにしたことで、他の要素に影響を及ぼさなくなりました。

5. ボタンの下に横からバーが現れるナビゲーション

マウスオーバーするとボタンの下に横からバーが現れるナビゲーションです。画面左側からマウスオーバーしたメニューボタンの下にバーが現れます。

サンプルデモ
HTML

<nav class="demo5">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<span class="demo5-bar"></span>
</ul>
<!--demo5--></nav>
CSS

.sample-demo .demo5 {
	position: relative;
	width: 400px;
	height: 45px;
	margin: 0 auto;
}
.sample-demo .demo5 li {
	display: block;
	float: left;
	width: 99px;
	height: 40px;
	background: #9fb7d4;
	text-align: center;
	margin-right: 1px;
}
.sample-demo .demo5 li:last-child {
	margin-right: 0;
}
.sample-demo .demo5 li a {
	display: block;
	color: #fff;
}
.sample-demo .demo5 .demo5-bar {
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 99px;
	height: 5px;
	background: #888;
	transition: 0.5s;
	opacity: 0;
	left: -50px;
}
.sample-demo .demo5 li:nth-child(1):hover ~ .demo5-bar {
	opacity: 1;
	left: 0;
}
.sample-demo .demo5 li:nth-child(2):hover ~ .demo5-bar {
	opacity: 1;
	left: 100px;
}
.sample-demo .demo5 li:nth-child(3):hover ~ .demo5-bar {
	opacity: 1;
	left: 200px;
}
.sample-demo .demo5 li:nth-child(4):hover ~ .demo5-bar {
	opacity: 1;
	left: 300px;
}

マウスオーバーで兄弟要素をコントロールします。応用すれば色々なパターンのサンプルが作れそうですね。

参考

マウスホバーでアニメーションしながら追従するバーをCSSだけで実装する

6. ボタンのサイズをバウンドさせて変更

4番のサンプルのマウスオーバーするとボタンのサイズが変わるのを、animationプロパティを使ってバウンドさせてみました。

サンプルデモ
HTML

<nav class="demo6">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<span class="demo6-bar"></span>
</ul>
<!--demo6--></nav>
CSS

.sample-demo {
	margin: 0 0 40px 0;
	padding: 0;
}
.sample-demo .demo6 {
	position: relative;
	overflow: hidden;
	width: 420px;
	height: 60px;
	margin: 0 auto;
}
.sample-demo .demo6 ul {
	width: 400px;
	height: 40px;
	padding: 10px !important;
}
.sample-demo .demo6 li {
	display: block;
	float: left !important;
	text-align: center;
	margin-right: 1px;
}
.sample-demo .demo6 li:last-child {
	margin-right: 0;
}
.sample-demo .demo6 li a {
	display: block;
	width: 99px;
	height: 40px;
	color: #fff;
	background: #9fb7d4;
	transition: 0.5s;
}
.sample-demo .demo6 li a:hover {
	animation: anime 3s ease-in-out;
}
@keyframes anime {
	0% { transform: scale(0.8, 0.8); }
	5% { transform: scale(1.2, 1.2); }
	10% { transform: scale(1, 1); }
	15% { transform: scale(1.2, 1.2); }
	20% { transform: scale(1, 1); }
	100% { transform: scale(1, 1); }
}

今回はtransformプロパティの値はscaleでしたが、違う値で試してみてもいいかもしれませんね。

今まではフラッシュやJavaScript等を使わないと実現できなかったことも、CSS3を使えばフラッシュやJavaScriptなしで簡単に動きのあるアニメーション効果を作ることができるようになりました、素敵です。

関連リンク

transition【CSS3リファレンス】
animation【CSS3リファレンス】
transform【CSS3リファレンス】
jQueryでフラッシュみたいなリンクボタン

参考

もう必要なくなっていたCSSのベンダープレフィックス

  • カテゴリー:Labs