「CSS Shake」を使って注意を引きたいテキスト・画像を揺らす(サンプル付き)

「CSS Shake」を使って注意を引きたいテキスト・画像が揺らす(サンプル付き)

テキスト・画像が揺れていると気になりますね!
簡単に揺れる仕組みを実装が出来ますので今回は「CSS Shake」を使って再現してみます!

HTML構造 STEP1

<div>の間に、テキスト・画像を入れてください。

こんな感じで入れてください。

揺れのバリエーション

使い方は上に書いたように使ってください。

CSS STEP2

CSS

赤枠で囲った「Download」をクリックしてください。ここに記述してあるCSSを貼り付けます。

CSSは長いですが、別途専用のCSSファイルを用意して読み込ませれば問題ないですね。

まとめ

[サンプル] テキスト・画像を揺らす

テキストを注目させたい! バナーに注目するようにしたい場合など使えそうです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*