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前端开发技术，分享网页相关资源。
---------------------------------------------------------------