ホームページ >ウェブフロントエンド >htmlチュートリアル >40 以上の CSS 画像ホバー アニメーション効果_html/css_WEB-ITnose
40 以上の CSS 画像ホバー アニメーション効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:53:341797ブラウズ
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