【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。

CSS3で、半透明のリングが波紋のように広がるエフェクトを作ります。

百聞は一見に如かず。
まず最初にデモをご覧ください。

【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト

CSSで円を作るにはbordar-radiusを使いますが、これを応用してエフェクトのアニメーション処理を作っていきます。

HTML の記述

<a class="button" href="#">
<span class="ring"></span>
</a>

全体をアンカータグ（aタグ）で囲み、波紋のアニメーションをするリングの部分は<span class="ring">でマークアップします。

CSS の設定

.button {
position:relative;
display:block;
width:50px;
height:50px;
margin:20px auto;
border-radius:100px;
background: #1aa;
}

.button .ring {
background:rgba(181, 244, 253, 0.8);
position:absolute;
height:70px;
width:70px;
top:-10px;
left:-10px;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-ms-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
z-index: -1;
}

.button:hover .ring {
   	-webkit-animation: wave 1s ease-out;
	-webkit-animation-iteration-count: infinite;
   	-moz-animation: wave 1s ease-out;
	-moz-animation-iteration-count: infinite;
   	-ms-animation: wave 1s ease-out;
	-ms-animation-iteration-count: infinite;
   	-o-animation: wave 1s ease-out;
	-o-animation-iteration-count: infinite;
   	animation: wave 1s ease-out;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wave {
	0% {-webkit-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-webkit-transform: scale(5, 5); opacity: 0.0;}
}
@-moz-keyframes wave {
	0% {-moz-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-moz-transform: scale(5, 5); opacity: 0.0;}
}
@-ms-keyframes wave {
	0% {-ms-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-ms-transform: scale(5, 5); opacity: 0.0;}
}
@-o-keyframes wave {
	0% {-o-transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {-o-transform: scale(5, 5); opacity: 0.0;}
}
@keyframes wave {
	0% {transform: scale(1, 1); }
	50% {opacity: 1;}
	100% {transform: scale(5, 5); opacity: 0.0;}
}

キーフレームアニメーションで動かすため、CSSの記述が若干多くなりますが、基本的にはシンプルな構造です。
サイトのワンポイントに取り入れてみてはいかがでしょうか。

【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。