利用CSS3实现页面元素动画序列显示效果

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Unlock|Cookie' rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" href="css/style1IE.css" />

2. HTML代码

        <div class="container">
            <div class="header">
                <a href="http://tympanus.net/Tutorials/LateralOnScrollSliding/">
                    <strong>&laquo; Previous Demo: </strong>Lateral On-Scroll Sliding with jQuery
                </a>
                <span class="right">
                    <a href="http://www.51qianduan.com//art/fashion-shoes-png-icons-2-37832624" target="_blank">Images by amirajuli</a>
                    <a href="http://tympanus.net/codrops/2011/12/07/splash-and-coming-soon-page-effects-with-css3/">
                        <strong>Back to the Codrops Article</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div>
            <h1 class="main">Splash &amp; Coming Soon Page Effects with CSS3</h1>
			<p class="demos">
				<a class="current-demo" href="index.html">Demo 1</a>
				<a href="index2.html">Demo 2</a>
				<a href="index3.html">Demo 3</a>
			</p>
			<div class="sp-container">
				<div class="sp-content">
					<div class="sp-row">
						<span><img src="images/example1/1.png" /></span>
						<span><img src="images/example1/2.png" /></span>
						<span><img src="images/example1/3.png" /></span>
						<span><img src="images/example1/4.png" /></span>
						<span><img src="images/example1/5.png" /></span>
					</div>
					<div class="sp-row sp-side-row">
						<span><img src="images/example1/11.png" /></span>
						<span><img src="images/example1/12.png" /></span>
					</div>
					<div class="sp-row sp-content-row">
						<h1>Coming Soon</h1>
						<h2>Desinger Shoes that you dream of for incredible prices</h2>
						<h1 class="sp-title"><em>Little</em> Blue Shoe</h1>
					</div>
					<div class="sp-row sp-side-row">
						<span><img src="images/example1/13.png" /></span>
						<span><img src="images/example1/14.png" /></span>
					</div>
					<div class="sp-row">
						<span><img src="images/example1/6.png" /></span>
						<span><img src="images/example1/7.png" /></span>
						<span><img src="images/example1/8.png" /></span>
						<span><img src="images/example1/9.png" /></span>
						<span><img src="images/example1/10.png" /></span>
					</div>
					<div class="sp-arrow"></div>
				</div>
				<div class="sp-side">
					<h2>Be the first to know:</h2>
					<div class="sp-input">
						<input type="text" value="Your email"/>
						<a href="index.html">Go</a>
					</div>
				</div>
			</div>
        </div>