图片/图形
CSS3炫酷圆形图片鼠标滑过特效
PetitQ
这是一款使用纯 css3 制作的炫酷圆形图片鼠标滑过特效合集。共有 7 种效果，7 种鼠标 hover 效果分别是：圆形放大缩小、翻盖动画、3d 翻转、淡入淡出、翻页效果和 3d 旋转。在插件中，所有的缩略图都被用 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 是列表相对于它的父元素居中。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
