特效描述:利用CSS3实现 页面元素 动画序列 显示效果。利用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>« 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 & 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>