>웹 프론트엔드 >HTML 튜토리얼 >12种炫酷的CSS3鼠标滑过图片遮罩层动画特效_html/css_WEB-ITnose

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:34:251019검색

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动画效果。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.