CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにする方法をご紹介します。
Contents
ディスプレイ広告
CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにするCSSの記述
※csshake.min.cssファイルを読み込みます。その他は必要に応じて変更して下さい。
<style> body{ text-align: center; font-size: 28px; line-height: 1.8em; font-weight: bold; } h1{ line-height:1.6em; text-align:center; font-weight:normal; padding:15px 0 30px 0; font-size: 16px; } </style> <link rel="stylesheet" type="text/css" href="csshake.min.css">
CSShakeを使ってタグ要素にclassを指定するだけで簡単に振るえるアニメーションにするHTMLの記述
※divタグ要素に10パターンの振るえるアニメーションにするclassを指定します。
<h1>文字をマウスオーバーすると文字が違ったアニメーションで振るえます。</h1> <div class="shake">shake</div> <div class="shake-hard">shake-hard</div> <div class="shake-slow">shake-slow</div> <div class="shake-little">shake-little</div> <div class="shake-horizontal">shake-horizontal</div> <div class="shake-vertical">shake-vertical</div> <div class="shake-rotate">shake-rotate</div> <div class="shake-opacity">shake-opacity</div> <div class="shake-crazy">shake-crazy</div> <div class="shake-chunk">shake-chunk</div>
CSShakeを使って各要素を振るえるアニメーションさせたデモページ
CSShakeを使って各要素を振るえるアニメーションさせたデモページ
ソース元:CSShake
以下がソース元です。
CSShake
※流用される場合は自己責任でお願いします。
デモページ