ホームページ  >  記事  >  ウェブフロントエンド  >  40 以上の CSS 画像ホバー アニメーション効果_html/css_WEB-ITnose

40 以上の CSS 画像ホバー アニメーション効果_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:53:341766ブラウズ

CSS ホバーは、Web デザインで非常に一般的に使用される CSS エフェクトです。創造性があれば、今日は主に 40 を超える CSS ホバー エフェクトを共有します。完成した画像エフェクトはダウンロードしてご利用いただけます。

ウェブサイト名: imageshoover.css

デモとダウンロード: オンライン デモ | Github

チュートリアル

このスタイルは現在40種類以上あり、作り方は以下の手順でとても簡単です。

ステップ 1: CSS スタイル シート ファイルを導入します

<head>  <link rel=”stylesheet” href=”css/imagehover.min.css”></head>

ステップ 2: 次の HTML 構造を参照してください

<figure class=”imghvr-fade”>  <img src=”#”>  <figcaption>    // Hover 内容  </figcaption></figure>

ここで、imghvr-fade は対応する CSS ホバーです効果、このクラス名はデモ ページから取得できます。

ホバーの背景色を変更します

CSS ファイルを開き、次のコードをカスタム カラー値に変更します。

[class^=’imghvr-‘],[class*=’ imghvr-‘] {  background-color: #D14233;}

もちろん、特定のものだけを個別に変更したい場合は、HTML ファイルの下にスタイル スタイルを直接追加するか、別のクラスを作成します。

<figure class=”imghvr-fade” style=”background-color:#D14233;”>  <img src=”#”>  <figcaption>    // Hover Content  </figcaption></figure>

互換性

Imagehover.css は、疑似要素、アニメーション、トランジションなどを含む CSS3 機能に大きく依存しているため、通常 CSS3 をサポートするブラウザーと互換性があります。

CSS HOVER 効果をもっと見たいですか?以前紹介した「20 の CSS ボタン マウス HOVER エフェクト表示」または「11 の超ハンサムなテキスト ホバー エフェクト」をご覧ください。

コミュニケーション: 才能のあるデザイナーをもっと増やしたいですか? (UI Design QQ Group) リストにアクセスして、50,000 人のデザイナーとデザインを交換してください。

デザイン ナビゲーション: 若い友人とマスターの両方にふさわしいデザイナー Web サイト ナビゲーション: http://hao.shejidaren.com

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。