iHover鼠标悬停效果包推荐

前端开发whqet,csdn,王海庆,whqet,前端开发专家

今天推荐一个鼠标悬停效果包，大家可以通过研读效果提高自己的水平，也可以直接用在自己的项目中。

1.引入

IHover是一个纯CSS3驱动的鼠标悬停效果（hover）效果包，独立工作，并且能与BootStrap3有效兼容。如下图所示。

项目主页，示例文件，下载文件。

2.特性

纯CSS3驱动，独立工作，能在任意项目中使用

基于SCSS，方便修改

模块化编码，无需引入整个文件

30+效果集中呈现

文档清晰

与Bootstrap3有效兼容

3.如何使用

iHover极易使用，你需要做的就是书写一些html代码，然后把CSS文件包含就来就行。

<link href="styles/ihover.css" rel="stylesheet">

文档结构如下图所示，

如果你想重新建立你的项目文件，请使用scss文件。

自己动手，实践一下，试验了第一个效果，果然简单。

拷贝html文件

<div class="ih-item circle effect1"><a href="#"><div class="spinner"></div><div class="img"><img src="http://gx.zptc.cn/whqet/ihover/1.jpg" alt="img"></div><div class="info"><div class="info-back"><h3>Heading here</h3><p>Description goes here</p></div></div></a>
</div>

然后引入ihover.css就可以啦。

4.效果解析

第一个效果的scss文件如下，大家可以研究下。

//
// --------------------------------------------------
.ih-item.circle.effect1 {.spinner {width: 230px;height: 230px;border: 10px solid #ecab18;border-right-color: #1ad280;border-bottom-color: #1ad280;border-radius: 50%;@include transition( all .8s ease-in-out );}.img {position: absolute;top: 10px;bottom: 0;left: 10px;right: 0;width: auto;height: auto;&:before {display: none;}}&.colored {.info {background: $overlay_colored_fallback;background: $overlay_colored;}}.info {top: 10px;bottom: 0;left: 10px;right: 0;background: $overlay_dark_fallback;background: $overlay_dark;opacity: 0;@include transition( all .8s ease-in-out );h3 {color: #fff;text-transform: uppercase;position: relative;letter-spacing: 2px;font-size: 22px;margin: 0 30px;padding: 55px 0 0 0;height: 110px;text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);            }p {color: #bbb;padding: 10px 5px;font-style: italic;margin: 0 30px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.5);}}a:hover {.spinner {@include transform( rotate(180deg) );}.info {opacity: 1;}}
}

该文件里使用了 Bourbon这个SassMixin集，请大家注意。

That's it.

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------