CSS3-炫酷创意圆形图片鼠标滑过特效

这是一款纯css3炫酷圆形图片鼠标滑过特效插件。在插件中，所有的缩略图都被用css3 border-radius制作成圆形，然后再在其上做各种鼠标滑过特效。

HTML

所有demo的html结构都如下所示：

<ul class="ch-grid">
    <li>
        <div class="ch-item ch-img-1">
            <div class="ch-info">
                <h3>Use what you have</h3>
                <p>by Angela Duncan <a href="http://www.htmleaf.com/">View on htmleaf</a></p>
            </div>
        </div>
    </li>
    <li>
        <div class="ch-item ch-img-2">
            <div class="ch-info">
                <h3>Common Causes of Stains</h3>
                <p>by Antonio F. Mondragon <a href="http://www.htmleaf.com/">View on htmleaf</a></p>
            </div>
        </div>
    </li>
    <li>
        <div class="ch-item ch-img-3">
            <div class="ch-info">
                <h3>Pink Lightning</h3>
                <p>by Charlie Wagers <a href="http://www.htmleaf.com/">View on htmleaf</a></p>
            </div>
        </div>
    </li>
</ul>

虽然这里可以使用图片，但是为了更加容易控制动画效果，这里使用的是背景图片。给每个div添加class为ch-img-。ch-info为图片的描述信息。

通用部分的css代码如下：

.ch-grid {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}
.ch-grid:after,
.ch-item:before {
    content: '';
    display: table;
}
.ch-grid:after {
    clear: both;
}
.ch-grid li {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

通过设置列表的display为inline-block和text-align为center是列表相对于它的父元素居中。

上面使用了clearfix hack，它来自于Nicolas Gallagher的http://nicolasgallagher.com/micro-clearfix-hack

各个demo的css代码请参考下载文件。

在线预览网盘下载

网盘下载密码:bain

郑重声明：

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

郑重声明：

1条评论

发表评论

蓝文

发表评论取消回复

HTML

郑重声明：

相关文章

1条评论

蓝文

发表评论 取消回复

发表评论取消回复