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

スポンサーリンク
HTML・JavaScript..

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

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

CSShakeとは

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

ダウンロード

CSShake
Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.

ダウンロードした「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を使う事ができるようになるのでとても便利です。目立たせたい所に使用してみてはいかがでしょうか。

おわりっ

コメント

タイトルとURLをコピーしました