CSS3-iHover | 纯CSS3炫酷鼠标滑过图片特效 | 蓝文资源库

iHover是一款效果相当炫酷的纯CSS3鼠标滑过图片特效。ihover可以和Bootstrap 3完美的结合使用。它提供了基于圆形图片和矩形图片共35种不同的鼠标滑过图片特效。它的特点有：

纯CSS3制作，没有任何依赖，可以在任何项目中使用。
通过Scss来构建，修改十分容易。
模块化代码，不需要引入整个文件。
共有35种不同的鼠标滑过效果。
可以和Bootstrap 3完美的结合使用。

使用方法

HTML结构

以effect2为例，它的HTML结构如下：

<!-- Left to right-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect2 left_to_right"><a href="#">
        <div class="img"><img src="images/assets/4.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect2 left_to_right"><a href="#">
        <div class="img"><img src="images/assets/5.jpg" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Left to right-->

在class中，circle指定使用圆形图片。effect2是指iHover黑字的第二种鼠标滑过图形效果。所有的效果在DEMO中都一一被列出。left_to_right是指在第二种效果中图片标题从左向右滑入。另外还可以取值为right_to_left，top_to_bottom或bottom_to_top。

在线预览网盘下载

网盘下载密码:dgia

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。

一	二	三	四	五	六	日
« 12月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

使用方法

HTML结构

郑重声明：

相关文章

发表评论 取消回复

发表评论取消回复