HOVER.CSSの使い方

HOVER.CSSの使い方

  • 2016-05-07  最終更新日:2016-05-07

今回は手軽にhoverアニメーションできるhover.cssのご紹介です。hoverしたら動きが実装できます。

以前 CSS3でのアニメーションライブラリanimate.cssの使い方のご紹介しましたが、今回はhoverに特化していますのでcssを読み込んでクラスを付加するだけでhoverするときに限りますが簡単にアニメーション実装できます。

Hover.css公式サイトにもサンプルがあります。デモページの内容はこちらの公式サイトと同じです。


スポンサーリンク


hover.css

Web​​ページへのhover.cssエフェクトを追加します。

<head></head>タグ内に配置された次のHTMLを使用してWebページへのリンク要素にhover.cssエフェクトをかけます。

<link href="css/hover.css" rel="stylesheet" media="all">

例えば、あなたが、hover.cssをリンク先のWebページを想定してみましょうに次のHTMLで構成され、その上にボタンを持っています。

<a href="#" class="button">チェックアウトします</a>

hvrから始まるhover.cssの独自クラスを付加します。詳しくはデモページを参照してください。

<a href="#" class="button hvr-bounce-in">チェックアウトします</a>

チェックアウトします

これで動きのあるhover要素が実装できました。簡単ですね。たくさんの種類がありますのでご覧になって実装したいクラスだけを取り込んで使っていきましょう。

⇒デモを見てみる

参考になれば幸いです。


∞Tadashi Suyama∞

css hover web
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
だから私はXperia

その前のスマホはgoogleのNexus5Xを使っておりました。これはこれで満足しておりましたが、あるつてでXperiaが安く購入できたので変更しました。iPhone3G、iPhone4S、iP...

14 Apr 2018

アイキャッチ
ラジコを録音して聞く方法-どがらじ

ウォーキング中などでラジオを聴くようにしているのですが、以前はFMラジオ機能付きのボイスレコーダーで録音して聴いていたのです。 しかも今のタイプは予約録音が出来るようですね、、、ちょっと昔のタ...

07 Apr 2018

アイキャッチ
ワードプレスの固定ページの階層で一番下の階層には同階層を表示する方法

主にサイドメニューで固定ページを表示させようと考えておりました。それで子階層があれば子階層を表示させて一番下の階層になれば同一階層を表示する方法をご紹介致します。 サイドメニューに表示する際に...

18 Mar 2018

アイキャッチ
ワードプレスのカスタムメニューをスライドトグル

今回はワードプレスのカスタムメニューをトグルダウンで表示させる方法をご紹介します。 クリックしてサブメニューが表示させる方法になります。スマホメニューなどにはよく使われているかと思います。 ...

17 Mar 2018

アイキャッチ
ワードプレス静的サイト生成プラグイン

ワードプレスでローカル環境で見てもらう必要があり、静的ファイルの出力を希望されていたのでそれが出来るプラグインを探しました。静的サイトの生成プラグインは主に3つだけですね。 * [Simply...

04 Mar 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

css hover web
フッターイメージ