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


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

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

円形にするコード

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

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

Circular image

Circular image

くるっと回転(animate-rotate)

Circular image

Circular image

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

Circular image

Circular image

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

Circular image

Circular image

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

Circular image

Circular image

スウィング(animate-swing)

Circular image

Circular image

ぐらぐら(animate-wobble)

Circular image

Circular image

ぴくぴく(animate-wiggle)

Circular image

Circular image

バウンド(animate-bounce)

Circular image

Circular image

パルス(animate-pulse)

Circular image

Circular image

複数組み合わせた場合

Circular image

Circular image

“DigiPressによるコンテンツ装飾テスト” への6件のフィードバック

  1. DigiPressであんなサイトやこんなサイトを簡単に作っちゃおう!

    インスピレーションをすぐ形にできるよ!

    • やぁ!

      自分でコメントしといてそれに返信してみたよ!

      これはテストコメントなんだ!

  2. DigiPressであんなサイトやこんなサイトを簡単に作っちゃおう!

    インスピレーションをすぐ形にできるよ!

    • やぁ!

      自分でコメントしといてそれに返信してみたよ!

      これはテストコメントなんだ!

  3. やろうと思えば何でも出来るけど、説明しきれないから買ってね!

  4. やろうと思えば何でも出来るけど、説明しきれないから買ってね!