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



101 403 135



特效描述: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>



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 加载动画 自动滚动图片轮播 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 滚动导航菜单 滚动菜单 滚动导航 滚动切换 滚动条切换 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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