おすすめグッズや役立つ情報ブログ

Sedori Plan

Web

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

投稿日:

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

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

HTML構造 STEP1

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

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

揺れのバリエーション

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

CSS STEP2

CSS

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

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

まとめ

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

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

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-Web

Copyright© Sedori Plan , 2018 All Rights Reserved.