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

最近の投稿

アイキャッチ
とっとりバーガーフェスタ2017(第7回)に行ってきました

去年も載せましたが今回も行ってきたので感想などを書いてみたいと思います。[⇒去年の記事はコチラ](/blog/private/2016/10/11/burgerfesta.html) 今年も行...

09 Oct 2017

アイキャッチ
ワードプレスでテーマの編集が出来ない対処方法

さて、今回はワードプレスのテーマ編集についてです。テスト用サイトでふと気がついたのですが、あれ?テーマ編集が出来なくなっている!セキュリティ上なくしたのかと思いました。現状のバージョンは4.8....

06 Oct 2017

アイキャッチ
新しくなったfotorの使い方

fotorのサイトが一新されました。HTML5で書き直されて高いパフォーマンスが期待できます。 新しくなった部分のみ記載しておりますので機能的に見たい方は[⇒以前の記事](/blog/app/...

01 Oct 2017

アイキャッチ
WordPressのプラグインReallySimpleSSLを手動で解除する方法

さて今回もトラブル系です。Let's Encryptがいろいろなサーバーに取り入れられ手軽にSSL化が出来るようになりましたが、まだ対応できていないサーバーも多いです。 ワードプレスを入れた際...

23 Sep 2017

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

著者

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

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

タグクラウド

css hover web
フッターイメージ