Heim >Web-Frontend >HTML-Tutorial >40+ CSS图像 hover 动画效果_html/css_WEB-ITnose
40+ CSS图像 hover 动画效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:53:341798Durchsuche
CSS Hover 在网页设计中是极为常用的一个 CSS 效果，只要你有创造力，都可以让 Hover 变得更多姿多彩，今天我们主要分享40多款使用 CSS HOVER 完成的图像效果，喜欢的可以下载下来使用哦。
网站名称：imageshover.css
演示 & 下载：在线演示| Github
使用教程
该样式目前拥有40多种，使用也十分简单，参照下面的步骤制作即可。
Step 1: 引入CSS样式表文件
<head> <link rel=”stylesheet” href=”css/imagehover.min.css”></head>
Step 2: 参照下面的HTML结构
<figure class=”imghvr-fade”> <img src=”#” alt="40+ CSS图像 hover 动画效果_html/css_WEB-ITnose" > <figcaption> // Hover 内容 </figcaption></figure>
其中 imghvr-fade 就是对应的 CSS hover 效果，这个 Class 名称可以到演示页获得。
修改 Hover 的背景颜色
打开 CSS 文件，把以下代码修改自定的颜色值即可。
[class^=’imghvr-‘],[class*=’ imghvr-‘] { background-color: #D14233;} 当然，如果你只想单独修改某一个，那么在 HTML 文件下，直接加入 style 样式，或单独写一个 class。
<figure class=”imghvr-fade” style=”background-color:#D14233;”> <img src=”#” alt="40+ CSS图像 hover 动画效果_html/css_WEB-ITnose" > <figcaption> // Hover Content </figcaption></figure>
兼容性
Imagehover.css 在很大程度上依赖 CSS3特色，包括伪元素、动画、过渡等等，所以一般支持 CSS3 的浏览器都可以兼容。
想看更多 CSS HOVER 特效？可以看看之前我们介绍的「 20款CSS按钮鼠标HOVER效果展示 」或「 11个超帅的文字Hover悬停效果 」
交流：想结交更多有才华的设计师？请到（UI设计QQ群）列表，与50000名设计师交流设计。
设计导航：小盆友和大神都值得拥有的设计师网址导航： http://hao.shejidaren.com
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css modules的几种技术方案_html/css_WEB-ITnoseNächster Artikel：3月书讯：远方的田野_html/css_WEB-ITnose