Uncategorized

DigiPressによるコンテンツ装飾テスト

CSS3アニメーションで動きをつけてインタラクティブに

Internet Explorer以外のブラウザにてご確認ください。
class に img-circular セレクターをつけると、画像が円形になります。

円形にするコード

<img src="画像のURL" alt="" width="300" height="300" class="alignleft img-circular">

マウスカーソルを画像に合わせてみると…

ブルブルシェイク(animate-shake)

Circular image

<img class="img-circular animate-shake" src="画像のURL" alt="Circular image" width="300" height="300">

くるっと回転(animate-rotate)

Circular image

<img class="img-circular animate-rotate" src="画像のURL" alt="Circular image" width="300" height="300">

ズームイン(animate-zoom-in)

Circular image

<img class="img-circular animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300">

ズームアウト(animate-zoom-out)

Circular image

<img class="img-circular animate-zoom-out" src="画像のURL" alt="Circular image" width="300" height="300">

ホバーシャドウ(animate-shadow)

Circular image

<img class="img-circular animate-shadow" src="画像のURL" alt="Circular image" width="300" height="300">

スウィング(animate-swing)

Circular image

<img class="img-circular animate-swing" src="画像のURL" alt="Circular image" width="300" height="300">

ぐらぐら(animate-wobble)

Circular image

<img class="img-circular animate-wobble" src="画像のURL" alt="Circular image" width="300" height="300">

ぴくぴく(animate-wiggle)

Circular image

<img class="img-circular animate-wiggle" src="画像のURL" alt="Circular image" width="300" height="300">

バウンド(animate-bounce)

Circular image

<img class="img-circular animate-bounce" src="画像のURL" alt="Circular image" width="300" height="300">

パルス(animate-pulse)

Circular image

<img class="img-circular animate-pulse" src="画像のURL" alt="Circular image" width="300" height="300">

複数組み合わせた場合

Circular image

<img class="img-circular animate-shadow animate-shake animate-zoom-in" src="画像のURL" alt="Circular image" width="300" height="300">