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

サイト内検索

最近の投稿

アイキャッチ
Web制作者が8年Chrome使ってきた中でおすすめの拡張機能

最近はEdgeもGoogle Chromeと同じChromiumベースでのブラウザとなりほとんどクローム(Chrome)状態ではあります。FirefoxとSafariぐらいでしょうか。Firef...

17 Mar 2019

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

アイキャッチ
ローカル環境を外部アクセス可能にする方法

さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。 本来は自分...

04 Feb 2019

アイキャッチ
複数のwebサービスを一元管理するアプリStationのご紹介

さて今回はwebサービスの一元管理アプリのご紹介です。よく使うサービスをまとめて管理できるアプリです。 以前[Franz](https://its-office.jp/blog/app/201...

22 Jan 2019

著者

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

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

タグクラウド

css hover web
フッターイメージ