CSSの小ネタ。マウスホバー時の挙動として、ちょっと面白かったのでCSSだけで作ってみました。

ストライプの背景をマウスホバーで動かし、ぐるぐると回っているような感じに見せるエフェクトです。画像を一切使わず、背景のストライプおよびアニメーションを全てCSSで実装しています。

ストライプを動かす

どういうものかというと、以下のようなものです。マウスホバーするとストライプが現れて、動き出すと思います。なお、ブラウザはモダンブラウザじゃないと見れません(最新版のChrome、Safari、FirefoxとIE11で確認済み)。スマホでも一応見れます。

ボタン

環境によっては、ストライプがちょっとギザギザするかもしれません。

作り方

至ってシンプル。ストライプはbackground-image:linear-gradientで、つまりCSSのグラデーションで表現し、動きはCSSのanimationを利用して動かしています。

HTML

<p class="btn__box">
    <a href="#">ボタン</a>
</p>

基本、HTMLは何でもいい。

CSS

background-image:linear-gradientとanimationには、ベンダープレフィックスが必要になるけど長いので割愛しています。

/* ボタンの大きさや位置をここで指定 */
.btn__box {
    width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    border: 1px solid #333;
}

/* 通常時のスタイル。グラデーションはtransparentにしておく */
.btn__box a {
    display: block;
    color: #666;
    background-image: linear-gradient(
        -45deg,
        transparent,
        transparent 25%,
        transparent 26%,
        transparent 50%,
        transparent 51%,
        transparent 75%,
        transparent 76%,
        transparent 100%
    );
    background-size: 8px 8px;
}

/* ホバー時のスタイル */
.btn__box a:hover {
    color: #fff;
    background-image: linear-gradient(
        -45deg,
        transparent,
        transparent 25%,
        #666666 26%,
        #666666 50%,
        transparent 51%,
        transparent 75%,
        #666666 76%,
        #666666 100%
    );
    background-size: 8px 8px;
    animation: anim 10s linear infinite;
}

/* アニメーションのスタイル */
@keyframes anim {
    0% {background-position: 0 0;}
    100% {background-position: 100% 100%;}
}

ストライプ

ストライプはグラデーションで表現。通常時にもグラデーションをtransparentで指定しているのは、ホバー時のタイムラグをなくすためです。ないと一瞬表示が乱れます。

ストライプの大きさはbackground-sizeで変更することができます。数値を大きくすればストライプが太くなるし、小さくするとストライプは細くなりますが、小さすぎると表示がおかしくなります。6pxぐらいが限度かと。また、ギザギザが出る場合は、1px単位で調整すればいい感じになると思います。

アニメーション

keyframesに背景の位置を0から100%で移動させるスタイルを指定し、animationのiteration-countをinfiniteにして無限に繰り返させて動かしています。

まとめ

色を変えるなり、スピードを変えるなり、太さを変えるなりで色々と違った感じになると思います。ストライプの間隔を大きくすることができるとさらにいいのですが、ちょっとよく分からなかったです。この場合は画像を使うしかないのかも。

以上、小ネタでした。