经验分享程序开发文档资料数据资源其它资源

CSS3实现3种网页过度效果代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现3种网页过度效果代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

CSS3实现3种网页过度效果代码

HTML代码(index.html):

<!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" />
        <title>CSS3ʵ��3����ҳ����Ч������</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<!-- 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>
		</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="#/?shots/394177-Sheriff-Woody"><img src="images/portfolio_01.jpeg" width="250"></a></li>
					<li><a href="#/?shots/392403-Spaceman"><img src="images/portfolio_02.jpeg" width="250"></a></li>
					<li><a href="#/?shots/388799-Harvey-Birdman"><img src="images/portfolio_03.jpeg" width="250"></a></li>
				</ul>
				<p class="footnote">Dribbble shots by <a href="#/?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>

HTML代码(index2.html):

<!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=utf-8" />
        <title>CSS3实现3种网页过度效果代码 - 程序员设计师联盟淘宝店</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style2.css" />
	</head>
	<body>
		<!-- Home -->
		<div id="home" class="panel">
			<div 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>
			</div>
		</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="#"><img src="images/portfolio_01.jpeg" width="250"></a></li>
					<li><a href="#"><img src="images/portfolio_02.jpeg" width="250"></a></li>
					<li><a href="#"><img src="images/portfolio_03.jpeg" width="250"></a></li>
				</ul>
				<p class="footnote">Dribbble shots by <a href="#">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 href="index.html#home">Demo 1</a>
				<a class="current-demo" href="#home">Demo 2</a>
				<a href="index3.html#home">Demo 3</a>
			</nav>
		</div>
		
	</body>
</html>

HTML代码(index3.html):

<!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" />
        <title>CSS3ʵ��3����ҳ����Ч������ - ����Ա���ʦ�����Ա���</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/style3.css" />
	</head>
	<body>
		<!-- 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>
		</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="#/?shots/394177-Sheriff-Woody"><img src="images/portfolio_01.jpeg" width="250"></a></li>
					<li><a href="#/?shots/392403-Spaceman"><img src="images/portfolio_02.jpeg" width="250"></a></li>
					<li><a href="#/?shots/388799-Harvey-Birdman"><img src="images/portfolio_03.jpeg" width="250"></a></li>
				</ul>
				<p class="footnote">Dribbble shots by <a href="#/?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&rsquo;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 href="index.html#home">Demo 1</a>
				<a href="index2.html#home">Demo 2</a>
				<a class="current-demo" href="#home">Demo 3</a>
			</nav>
		</div>

	</body>
</html>

CSS代码(demo.css):

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* General Demo Style */
body{font-family:'Electrolize',Arial,sans-serif;font-weight:400;font-size:15px;color:#fff;}
a,a:link{text-decoration:none;color:#fff;}
.clr{clear:both;}
/* Top Bar Style */
.codrops-top{line-height:24px;font-size:11px;background:rgba(255,255,255,1);text-transform:uppercase;z-index:9999;position:fixed;top:0px;left:0px;width:100%;height:24px;box-shadow:1px 0px 2px rgba(0,0,0,0.2);-webkit-animation:slideOut 0.5s ease-in-out 0.3s backwards;-moz-animation:slideOut 0.5s ease-in-out 0.3s backwards;-o-animation:slideOut 0.5s ease-in-out 0.3s backwards;-ms-animation:slideOut 0.5s ease-in-out 0.3s backwards;animation:slideOut 0.5s ease-in-out 0.3s backwards;}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.codrops-top a:hover{background:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
/* Demo Buttons */
#codrops-demos{position:fixed;z-index:2000;top:50px;right:50px;}
#codrops-demos a{display:inline-block;font-size:12px;width:60px;height:24px;color:#000;line-height:24px;text-align:center;box-shadow:1px 1px 2px rgba(0,0,0,0.2);background:rgba(255,255,255,0.9);text-transform:uppercase;}
#codrops-demos a:hover{background:#ddd;color:#000;}
#codrops-demos a.current-demo,#codrops-demos a.current-demo:hover{background:#000;color:#fff;cursor:default;}
@-webkit-keyframes slideOut{0%{top:-30px;opacity:0;}
100%{top:0px;opacity:1;}
}
@-moz-keyframes slideOut{0%{top:-30px;opacity:0;}
100%{top:0px;opacity:1;}
}
@-o-keyframes slideOut{0%{top:-30px;opacity:0;}
100%{top:0px;opacity:1;}
}
@-ms-keyframes slideOut{0%{top:-30px;opacity:0;}
100%{top:0px;opacity:1;}
}
@keyframes slideOut{0%{top:-30px;opacity:0;}
100%{top:0px;opacity:1;}
}

CSS代码(style.css):

html,body{height:100%;}
body{width:100%;background:#ffcb00;overflow:hidden;}
#header{position:absolute;z-index:2000;width:235px;top:50px;}
#header h1{font-size:30px;font-weight:400;text-transform:uppercase;color:rgba(255,255,255,0.9);text-shadow:0px 1px 1px rgba(0,0,0,0.3);padding:20px;background:#000;}
#navigation{margin-top:20px;width:235px;display:block;list-style:none;z-index:3;}
#navigation a{color:#444;display:block;background:#fff;background:rgba(255,255,255,0.9);line-height:50px;padding:0px 20px;text-transform:uppercase;margin-bottom:6px;box-shadow:1px 1px 2px rgba(0,0,0,0.2);font-size:14px;}
#navigation a:hover{background:#ddd;}
.content{right:40px;left:280px;top:0px;position:absolute;padding-bottom:30px;}
.content h2{font-size:110px;padding:10px 0px 20px 0px;margin-top:52px;color:#fff;color:rgba(255,255,255,0.9);text-shadow:0px 1px 1px rgba(0,0,0,0.3);}
.content p{font-size:18px;padding:10px;line-height:24px;color:#fff;display:inline-block;background:black;padding:10px;margin:3px 0px;}
.panel{min-width:100%;height:98%;overflow-y:auto;overflow-x:hidden;margin-top:-150%;position:absolute;background:#000;box-shadow:0px 4px 7px rgba(0,0,0,0.6);z-index:2;-webkit-transition:all .8s ease-in-out;-moz-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
.panel:target{margin-top:0%;background-color:#ffcb00;}
#home:target ~ #header #navigation #link-home,#portfolio:target ~ #header #navigation #link-portfolio,#about:target ~ #header #navigation #link-about,#contact:target ~ #header #navigation #link-contact{background:#000;color:#fff;}
#works{padding:15px 0px;}
#works li{display:inline;}
#works li a{padding-right:10px;}
#works img{box-shadow:1px 1px 2px rgba(0,0,0,0.3);padding:12px;background:rgba(255,255,255,0.9);}
#form p{background:#fff;color:#000;}
#form input,#form textarea{background:#000;color:#fff;border:none;}
#form textarea{width:493px;height:100px;}
#form label{padding-right:10px;float:left;}
.footnote a{color:#ddd;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
262.17 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
262.17 KB
立即下载
文琴嘉
了解
打赏作者 鼓励作者
Html CSS3特效
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章