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

最近の投稿

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

アイキャッチ
お盆休みのお知らせ

毎日の残暑、暑いですね。暑中お見舞い申し上げます。 平素より、大変お世話になっております。 さて、弊社では下記の予定で夏期休暇を実施させていただきますので、ご了承のほどよろしくお願い申し上げ...

10 Aug 2017

アイキャッチ
マルチOSのコマンドライン型ランチャーアプリzazu

Macには圧倒的な使いやすさのalfredがあるのですがそのようなランチャーがWindows環境でないか探してみたところありましたのでご紹介します。ただalfredにはまだ遠く及ばない気がします...

05 Aug 2017

アイキャッチ
MacでWinSCPを使う方法

Wine(ワイン)とは macOS上でWindowsソフトを動かすためのプログラムです。今年初めに2.0にアップデートされたようです。[Wine 2.0が公開](http://forest.wa...

30 Jul 2017

著者

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

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

タグクラウド

css hover web
フッターイメージ