【CSShake】CSSでぶるぶるとした動きを簡単に表現する方法

こんにちは、ハル@haru_elpisです。

CSSでぶるぶるとした動きを表現したい時に使える「CSShake」の紹介です。

CSShakeとは

「CSShake」はクラスを指定した要素をぶるぶると振える効果を出すことができます。

ダウンロード

https://elrumordelaluz.github.io/csshake/

ダウンロードした「csshake.min.css」ファイルをcssフォルダなど任意の場所へ移動しておきましょう。

head

<link rel="stylesheet" type="text/css" href="csshake.min.css">

HTML

<div class="shake">ベーシック</div>
<div class="shake-hard">ハード</div>
<div class="shake-slow">スロー</div>
<div class="shake-little">リトル</div>
<div class="shake-horizontal">横揺れ</div>
<div class="shake-vertical">縦揺れ</div>
<div class="shake-rotate">斜め</div>
<div class="shake-opacity">透過</div>
<div class="shake-crazy">クレイジー</div>
<div class="shake-chunk">チャンク</div>

これだけでCSSを使う事ができるようになるのでとても便利です。目立たせたい所に使用してみてはいかがでしょうか。

おわりっ

[affi id=23]