波紋 | 動くWebデザインアイディア帳

画像リンクの動き
-波紋-

デモページを見る

See the Pen 7-9 波紋 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

波紋の要素のはみ出している部分を隠すためのマスクをつくり、CSSのoverflow:hidden;を使って隠す。
マスクの疑似要素beforeに円の背景色つくり、円が中心から拡大するアニメーションをつくる。

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/7-9.css">
</head>

body内の画像リンクを表示させたい場所に以下のHTMLを記載します。

<div class="circle"><a href="#"><span class="mask"><img src="img/02.jpg" alt=""></span></a></div>

自作のCSS内の書き方

/*　波紋　*/

.circle span.mask{
	position: relative;/*波紋の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.circle span.mask::before {
	position: absolute;
	content:"";
	transform: scale(0);/*円の大きさ初期値は0*/
	opacity: 0;/*透過0*/
	width:100%;/*円のサイズ指定*/
	height:100%;/*円のサイズ指定*/
	border-radius:50%;/*円の角丸指定*/
	background: rgba(255,255,255,0.4);/*円の背景色*/
}

.circle span.mask:hover::before {/*hoverした時の変化*/
	animation: circle 0.75s;/*アニメーションの名前と速度を定義*/
}

@keyframes circle {
  0% {
  transform: scale(0);
  opacity: 1;/*透過なし*/
  }
  30% {
    opacity: 1;
  }
  100% {
  transform: scale(2);/*アニメーションで大きくなった2倍の円の指定*/
  }
}