Heim > Web-Frontend > HTML-Tutorial > 40+ CSS图像 hover 动画效果_html/css_WEB-ITnose

40+ CSS图像 hover 动画效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:53:34
Original
1794 Leute haben es durchsucht

CSS  Hover 在网页设计中是极为常用的一个 CSS 效果,只要你有创造力,都可以让 Hover 变得更多姿多彩,今天我们主要分享40多款使用 CSS HOVER 完成的图像效果,喜欢的可以下载下来使用哦。

网站名称:imageshover.css

演示 & 下载:在线演示|  Github

使用教程

该样式目前拥有40多种,使用也十分简单,参照下面的步骤制作即可。

Step 1: 引入CSS样式表文件

<head>  <link rel=”stylesheet” href=”css/imagehover.min.css”></head>
Nach dem Login kopieren

Step 2: 参照下面的HTML结构

<figure class=”imghvr-fade”>  <img  src=”#” alt="40+ CSS图像 hover 动画效果_html/css_WEB-ITnose" >  <figcaption>    // Hover 内容  </figcaption></figure>
Nach dem Login kopieren

其中 imghvr-fade 就是对应的 CSS hover 效果,这个 Class 名称可以到演示页获得。

修改 Hover 的背景颜色

打开 CSS 文件,把以下代码修改自定的颜色值即可。

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

当然,如果你只想单独修改某一个,那么在 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>
Nach dem Login kopieren

兼容性

Imagehover.css 在很大程度上依赖 CSS3特色,包括伪元素、动画、过渡等等,所以一般支持 CSS3 的浏览器都可以兼容。

想看更多 CSS HOVER 特效?可以看看之前我们介绍的「 20款CSS按钮鼠标HOVER效果展示 」或「 11个超帅的文字Hover悬停效果 」

交流:想结交更多有才华的设计师?请到(UI设计QQ群)列表,与50000名设计师交流设计。

设计导航:小盆友和大神都值得拥有的设计师网址导航: http://hao.shejidaren.com

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage