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

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

WBOY

リリース： 2016-06-21 08:53:34

オリジナル

1758 人が閲覧しました

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

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