纯CSS3浮动导航条点击的页面转换



91 362 121



特效描述:纯CSS3 浮动导航条 点击的页面转换,CSS3的页面转换

代码结构

1. 引入CSS

<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' />

2. HTML代码

<!-- 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="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 -->
	<div 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>
	</div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 浮动提示框 图片广告 图片滑动 图片滑块 背景切换 大图切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到