波紋が広がりそうなタイトルですが、CSSの話で、事が起こるほうの波紋ではありません。

Dribbbleをぼーっと眺めていたら、きれいに波紋が広がるアニメーションがあって、CSSでできそうだったのでやってみました。

デモです

DEMO PAGE

マウスオーバーで波紋が広がるエフェクトがかかります。CSSのみで実装しています。まあ、良くあるやつです(自虐)。

四角いのと丸いのを作ってみましたが、四角いのはちょっと微妙。やっぱり丸のほうがしっくりきますね。下段の2つは、第二波があります。

実装方法

デモでは4種類(形が違うだけなので実質2種類)ありますが、スタンダードな「丸」の場合のものを載せておきます。

HTML

<div class="box">
    <a href="#">テキスト</a>
</div>

HTMLはこれだけです。

CSS

.box {
    width: 100px;
    height: 100px;
}

.box a {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: rgba(233,88,91,1);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
}

.box a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: none;
}

.box a:hover:after {
    -webkit-animation: rippleSecond 1.5s ease;
    animation: rippleSecond 1.5s ease;
}

@-webkit-keyframes ripple {
    0%{opacity:1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(233,88,91,0);}
    100%{opacity:0;-webkit-transform:scale(2);transform:scale(2);box-shadow: 0 0 0 2px rgba(233,88,91,1);}
}

@keyframes ripple {
    0%{opacity:1;-webkit-transform:scale(1);transform:scale(1);box-shadow: 0 0 0 1px rgba(233,88,91,0);}
    100%{opacity:0;-webkit-transform:scale(2);transform:scale(2);box-shadow: 0 0 0 2px rgba(233,88,91,1);}
}

HTMLに無駄な要素が増えるのが嫌だったので、擬似要素を使っています。

特徴としてはanimation属性でアニメーションさせているところでしょうか。最近、transitionが嫌いです(使うけど)。また、波紋はあえてbox-shadowで表現しています。最初はborderでやってみたのですが、微妙にずれるのでbox-shadowにしてみました。

第二波を起こす場合

第一波の波紋に続けて、すぐ第二波を起こす場合は、before擬似要素を追加します。

.box a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: none;
}

.box a:hover:before {
    -webkit-animation: ripple 1.5s ease .3s;
    animation: ripple 1.5s ease .3s;
}

上記を追加するだけで、1回のマウスオーバーで続けて第二波が発生するようになります。

衝動にかられて、ちゃちゃっとやったにしてはなかなか良い感じ。水滴を垂らした時のリアルな波紋とは程遠いかもしれませんが、エフェクトの感じが気持ち良くて、何度もマウスオーバーしちゃいますよ(個人の感想です)。

早さとかタイミングとかシャドウとか、色々と微調整するともっと良くなりそうです。

ぜひお試しください。