css3響應式布局點擊導航頁面滾動切換效果



105 419 140



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

加群請備注:從官網了解到

老夫子电子