css3炫酷圆形图片鼠标滑过特效

当前位置:主页 > CSS3库 > CSS3动画 > css3炫酷圆形图片鼠标滑过特效
css3炫酷圆形图片鼠标滑过特效
分享:

    插件介绍

    这是一款使用纯css3制作的炫酷圆形图片鼠标滑过特效合集。共有7种效果,7种鼠标hover效果分别是:圆形放大缩小、翻盖动画、3d翻转、淡入淡出、翻页效果和3d旋转。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-25
    阅读:

简要教程

这是一款纯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/

下面是7种效果的缩略图:

css3圆形图片鼠标hover效果1

css3圆形图片鼠标hover效果2

css3圆形图片鼠标hover效果3

css3圆形图片鼠标hover效果4

css3圆形图片鼠标hover效果5

css3圆形图片鼠标hover效果6

css3圆形图片鼠标hover效果7

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