效果如下：
主要代码如下：
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为3种网页过度效果代码（CSS3)，属于站长常用代码，更多其他代码代码请访问懒人图库JS代码频道。" />
<title>3种网页过度效果代码（CSS3)_懒人图库</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Your name" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css' />
</head>
<body>
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="#" target="_blank">
PAGE TRANSITIONS WITH CSS3
</a>
<span class="right">
<a href="#" target="_blank">
<strong>Back to the baidu.com</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<!-- Home -->
<div id="home" class="content">
<h2>Home</h2>
<p>So you want a single page website, uh? Well, if you follow this tutorial you will be able to create a very nifty one-pager. Check out the rest of the sections on this page so you can see for yourself what am I talking about.</p>
<p>This page consists of different panels that will slide or appear when clicking on the respective link.</p>
<p>With the general sibling selector we can change the color of the "selected" panel link.</p>
<p><p>3种网页过度效果代码（CSS3)，可独立用于网页设计展示，兼容主流浏览器！</p><p><br /></p><p>使用方法：</p><p>1、head区域引入css文件</p><p>2、注意对应的css类的名称</p><p>3、建议整站做移植使用</p></p>
<p></p>
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel">
<div class="content">
<h2>Portfolio</h2>
<p>Some really nice portfolio shots:</p>
<ul id="works">
<li><a href="http://dribbble.com/shots/394177-Sheriff-Woody"><img src="images/portfolio_01.jpeg" width="250"></a></li>
<li><a href="http://dribbble.com/shots/392403-Spaceman"><img src="images/portfolio_02.jpeg" width="250"></a></li>
<li><a href="http://dribbble.com/shots/388799-Harvey-Birdman"><img src="images/portfolio_03.jpeg" width="250"></a></li>
</ul>
<p class="footnote">Dribbble shots by <a href="http://dribbble.com/stuntman">Matt Kaufenberg</a>.</p>
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel">
<div class="content">
<h2>About</h2>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel">
<div class="content">
<h2>Contact</h2>
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
<form id="form">
<p><label>Your Name</label><input type="text" /></p>
<p><label>Your Email</label><input type="text" /></p>
<p><label>Your Message</label><textarea></textarea></p>
</form>
</div>
</div>
<!-- /Contact -->
<!-- Header with Navigation -->
<div id="header">
<h1>Page Transitions with CSS3</h1>
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
<li><a id="link-about" href="#about">About Me</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>
</ul>
<!-- Demo Nav -->
<nav id="codrops-demos">
<a class="current-demo" href="#home">Demo 1</a>
<a href="index2.html#home">Demo 2</a>
<a href="index3.html#home">Demo 3</a>
</nav>
</div>
</body>
</html>
扫一扫
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
