CSShake はホームページ上のあらゆる要素をぶるぶるふるわすことができるCSSベースのアニメーションライブラリです。
バイブレーションのように震え続ける激しいアニメーション等々さまざまな形で震えるアニメーションを実装することができるCSSライブラリーです。
サンプル画像の子供達にマウスを合わせてみてください。アニメーションが実行されます。
画像取得用ショートコード function.php に追加
|
1 2 3 4 5 6 7 8 9 |
// 画像取得用ショートコード function.php に追加 function getimage2($atts) { $folder= $atts["folder"] ? $atts["folder"] : "/img/flexbox"; $width = $atts["width"] ? $atts["width"] : "150"; $class = $atts["class"] ? $atts["class"] : "item"; $imgdata = get_template_directory_uri() . "/$folder/" . $atts["img"]; return "<img src=\"$imgdata\" alt=\"\" class=\"$class\" width=\"$width\" />\n"; } add_shortcode('lbimg2', 'getimage2'); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// HTML <div id="cssContainer"> <div class="shake">[lbimg2 img=kids01.png folder=/img/kids]</div> <div class="shake-hard">[lbimg2 img=kids02.png folder=/img/kids]</div> <div class="shake-slow">[lbimg2 img=kids03.png folder=/img/kids]</div> <div class="shake-little">[lbimg2 img=kids04.png folder=/img/kids]</div> <div class="shake-horizontal">[lbimg2 img=kids05.png folder=/img/kids]</div> <div class="shake-vertical">[lbimg2 img=kids06.png folder=/img/kids]</div> <div class="shake-rotate">[lbimg2 img=kids07.png folder=/img/kids]</div> <div class="shake-opacity">[lbimg2 img=kids08.png folder=/img/kids]</div> <div class="shake-crazy">[lbimg2 img=kids09.png folder=/img/kids]</div> <div class="shake-chunk">[lbimg2 img=kids10.png folder=/img/kids]</div> <div class="shake-crazy">[lbimg2 img=kids11.png folder=/img/kids]</div> <div class="shake-hard">[lbimg2 img=kids12.png folder=/img/kids]</div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
//CSS #cssContainer { display: flex; flex-wrap:wrap; justify-content: space-between; } #cssContainer .item{ width:150px; height:150px; } |