HOVER.CSSの使い方 - ITS

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要素が実装できました。簡単ですね。たくさんの種類がありますのでご覧になって実装したいクラスだけを取り込んで使っていきましょう。

⇒デモを見てみる

参考になれば幸いです。

WordPress　仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

posted with ヨメレバ

中島真洋　技術評論社 2015-06-23

楽天ブックス

∞Tadashi Suyama∞

css hover web

サイト内検索

最近の投稿

アイキャッチ

Perlで500エラー！原因は文字コードだけでなく改行コード

あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。ありがちなのがパーミッションとかパスが問題になるんのですけど...

19 Feb 2022

アイキャッチ

WordPressの標準メールアドレスの変更方法

今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...

12 Feb 2022

アイキャッチ

LibSass（node-sass）からDartSassに移行の手順

Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass（いまここ） Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...

22 Jan 2022

アイキャッチ

明けましておめでとうございます

明けましておめでとうございます。本年も何卒よろしくお願いいたします。年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...

10 Jan 2022

アイキャッチ

そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

ブログアーカイブ

ブログカテゴリー

著者

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

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

タグクラウド

css hover web

フッターイメージ