3种CSS3实现的网页过度效果代码,可独立用于网页设计展示

效果如下:
请添加图片描述
主要代码如下:

<!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>

下载源码

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

reg183

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值