css3响应式布局点击导航页面滚动切换效果



140 559 187



特效描述:css3响应式布局 点击导航页面 滚动切换效果,响应式布局点击导航页面滚动切换

代码结构

1. 引入CSS

<link href='http://fonts.useso.com/css?family=Josefin+Slab:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/simple.css" />

2. HTML代码

<div class="container">
	<div class="st-container">
		<input type="radio" name="radio-set" checked="checked" id="st-control-1" />
		<a href="#st-panel-1">Serendipity</a>
		<input type="radio" name="radio-set" id="st-control-2" />
		<a href="#st-panel-2">Happiness</a>
		<input type="radio" name="radio-set" id="st-control-3" />
		<a href="#st-panel-3">Tranquillity</a>
		<input type="radio" name="radio-set" id="st-control-4" />
		<a href="#st-panel-4">Positivity</a>
		<input type="radio" name="radio-set" id="st-control-5" />
		<a href="#st-panel-5">Passion</a>
		<div class="st-scroll">
			<!-- Placeholder text from http://hipsteripsum.me/ -->
			<section class="st-panel st-color" id="st-panel-2">
				<div class="st-deco" data-icon="2"></div>
				<h2>Happiness</h2>
				<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
			</section>
			<section class="st-panel" id="st-panel-3">
				<div class="st-deco" data-icon="B"></div>
				<h2>Tranquillity</h2>
				<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
			</section>
			<section class="st-panel st-color" id="st-panel-4">
				<div class="st-deco" data-icon="x"></div>
				<h2>Positivity</h2>
				<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
			</section>
			<section class="st-panel" id="st-panel-5">
				<div class="st-deco" data-icon="Ç"></div>
				<h2>Passion</h2>
				<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
			</section>
		</div>
	<!-- // st-scroll -->
	</div>
<!-- // st-container -->
</div>



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


热门标签: 滚动导航菜单 html5动画导航菜单 滚动切换 html5图片动画 图片滚动 html5文字动画 文字滚动 html5表情动画 图片文字滚动 html5线条动画 全屏滚动 html5飘落动画 页面滚动 html5光标动画 html5悬停动画 滚动流动 加载动画 自动滚动图片轮播 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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