这是一款纯css3炫酷圆形图片鼠标滑过特效插件。在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效。
HTML
所有demo的html结构都如下所示:
-
Use what you have
by Angela Duncan View on htmleaf
-
Common Causes of Stains
by Antonio F. Mondragon View on htmleaf
-
Pink Lightning
by Charlie Wagers View on htmleaf
虽然这里可以使用图片,但是为了更加容易控制动画效果,这里使用的是背景图片。给每个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是列表相对于它的父元素居中。
下面是7种效果的缩略图:
各个demo的css代码请参考下载文件。