<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery超酷文字淡入淡出显示特效 | jQuery特效|手机微信网站特效| 脚本之家</title>
<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 脚本之家" />
<meta name="description" content="脚本之家-专注于HTML5、CSS3、js、jQuery、手机移动端等脚本之家的手机与分享。特效库始终坚持：无会员、无积分、无限制的“三无原则”，所有的资源都免费提供广大童鞋下载学习和使用。" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href="css/reveal-it.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.box-row{padding: 0 2.5em ;}
.box-row p{font-weight: 600;font-size: 1.2em;}
.box-null{min-height: 5em;}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header bgcolor-11">
<h1>jQuery超酷文字淡入淡出显示特效 </h1>
</header>
<div class="htmleaf-content">
<div class="box-row">
<p>Box 1: Reveal Immediately</p>
<div class="box1">
<h3>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h3>
</div>
</div>
<div class="box-row bgcolor-13">
<p>Box 2: Reveals after 3000ms delay</p>
<div class="box2">
<h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
</div>
</div>
<div class="box-row">
<p>Box 3: Reveal on click event</p>
<div>
<div class="box3">
<h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
</div>
</div>
<button class="btn btn-primary btn-reveal">Reveal!</button>
</div>
<div class="box-row">
<div class="box-null">往下滚动鼠标</div>
</div>
<div class="box-row">
<!--Original-->
<p>Box 4: Reveal when element scrolls into the viewport</p>
<div>
<div class="box4">
<h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.1.7.1.min.js" type="text/javascript"></script>
<script src="js/reveal-it.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</body>
</html>
