CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法

Posted : 2012-01-27 14:29:00 by namba
CSS3
共有

またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。

とりあえずデモです。↓のボタンにマウスを乗せてみてください。
※ 最新の Firefox か webkit で見てください。

こっちは、さりげなくアニメーションしているパターンです。
よく見ないとわかりませんよ。

作り方

まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つを読んでみてください。

HTML

Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。

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

CSS

アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。

※ わかりやすくするために、ベンダープレフィックスは付けていません。
実際のものが欲しい方は、記事の最後からダウンロードしてください。

.button {
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
	border-radius: 100px;
	background: #04DDFD;
	}
.button .ring {
	background: rgba(181, 244, 253, 0.8);
	position: absolute;
	z-index:-1;
	border-radius: 100px;
	height: 70px;
	width: 70px;
	top: -10px;  /*A.中心*/
	left: -10px;  /*A.中心*/
}
.button:hover .ring {
   	animation: pulsate 1s ease-out;  /* スピードなど */ 
	animation-iteration-count: infinite;
	}
@keyframes pulsate {
    0%   { transform: scale(1, 1); }
    50%  { opacity: 1; }
    100% { transform: scale(4, 4); opacity: 0.0; }
}

Aの部分でリングの中心を指定していますので、ボタンのサイズを変更する場合は、注意してください。