jQuery超酷css文字淡入淡出效果

reveal-it.js是一款jQuery文字淡出淡入显示特效插件。该文字特效插件可以使文字从左向右淡入淡出显示。该插件小巧简单，非常适合用于制作标题文字的动画效果。

分类：文字特效 > 文字动画难易：

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

<!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超酷文字淡入淡出显示特效</title>
	<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>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header bgcolor-11">
			<h1>jQuery超酷文字淡入淡出显示特效 <span>A jQuery plugin that gradually reveals text from left to right to produce a fade-in effect</span></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="http://libs.useso.com/js/jquery/1.11.0/jquery.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>