图片/图形
炫酷CSS3鼠标滑过图片遮罩层动画特效
PetitQ
InContent 是一款效果非常炫酷的 CSS3 鼠标滑过图片遮罩层动画特效。这组特效共有 12 种不同的鼠标滑过图片效果，分为滑动、旋转和翻转 3 大类。它可以在支持 CSS3 transition 和 transform 属性的现代浏览器中正常工作。
使用该 CSS3 鼠标滑过图片遮罩层动画特效需要在页面中引入由 SASS 编译的 sass-compiled.css 文件或由 LESS 编译的 less-compiled.css 文件。
<link rel="stylesheet" href="css/sass-compiled.css" type="text/css" />
或者：
<link rel="stylesheet" href="css/less-compiled.css" type="text/css" />
也想出现在这里？联系我们吧
HTML 结构
该 CSS3 鼠标滑过图片遮罩层动画特效的基本 HTML 结构如下：
<div class="pic">
<img src="img/01.jpg" class="pic-image" alt="Pic"/>
<span class="pic-caption bottom-to-top">
<h1 class="pic-title">Pic Title</h1>
<p>图片描述文本</p>
</span>
</div>
.bottom-to-top 是遮罩层的动画效果类。
动画效果
该 CSS3 鼠标滑过图片遮罩层动画特效有以下 12 种可用的 CSS3 动画效果。
.bottom-to-top：从下到上滑动
.top-to-bottom：从上到下滑动
.left-to-right：从左向右滑动
.right-to-left：从右向左滑动
.rotate-in：旋转进入
.rotate-out：旋转离开
.open-up：向上翻转
.open-down：向下翻转
.open-left：向左翻转
.open-right：向右翻转
.come-left：带倾斜效果的向左翻转
.come-right：带倾斜效果的向右翻转
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
