18種html5圖片分頁導航按鈕樣式動畫特效



117 464 155



特效描述:圖片分頁導航 按鈕樣式動畫,html5分頁導航按鈕,分頁按鈕動畫特效

代碼結構

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Condensed" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/main.js"></script>

3. HTML代碼

	<svg class="hidden">
		<defs>
			<symbol id="icon-arrow" viewBox="0 0 24 24">
				<title>arrow</title>
				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
			</symbol>
			<symbol id="icon-drop" viewBox="0 0 24 24">
				<title>drop</title>
				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
			</symbol>
			<symbol id="icon-triangle" viewBox="0 0 24 24">
				<title>triangle</title>
				<path d="M4.5,19.8C4.5,19.8,4.5,19.8,4.5,19.8V4.2c0-0.3,0.2-0.5,0.4-0.7c0.2-0.1,0.5-0.1,0.8,0l13.5,7.8c0.2,0.1,0.4,0.4,0.4,0.7c0,0.3-0.2,0.5-0.4,0.7L5.7,20.4c-0.1,0.1-0.3,0.1-0.5,0.1C4.8,20.6,4.5,20.2,4.5,19.8z M6,5.6v12.8L17.2,12L6,5.6z"/>
			</symbol>
			<symbol id="icon-bubble" viewBox="0 0 48 24">
				<title>bubble</title>
				<path d="M0.9,23c-0.2,0.2,0,0.8,0.2,0.9C1.2,24,1.3,24,1.4,24c0.2,0,0.3-0.1,0.5-0.1l10.7-4.1h30.7c2.2,0,3.9-1.8,3.9-3.9V3.9c0-2.2-1.8-3.9-3.9-3.9H5.9C3.7,0,2,1.8,2,3.9v11.8c0,2.2,1,3.5,3.2,3.5C5.1,19.2,2.2,21.5,0.9,23zM45.7,15.8c0,1.3-1.1,2.4-2.4,2.4h-31c-0.2,0-0.3,0.1-0.5,0.1l-9.4,4.3c0,0,4.1-2.9,4.7-3.7c0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.3-0.2-0.5-0.2H5.9c-1.3,0-2.4-1.1-2.4-2.4V3.9c0-1.3,1.1-2.4,2.4-2.4h37.4c1.3,0,2.4,1.1,2.4,2.4V15.8L45.7,15.8z"/>
			</symbol>
			<!-- Icon by Gregor Cresnar: http://www.flaticon.com/free-icon/magnifying-glass_126474#term=magnifier&page=1&position=1 -->
			<symbol id="icon-magnifier" viewBox="0 0 24 24">
				<title>magnifier</title>
				<path d="M22.6,20l-4.8-4.8c0,0-0.1,0-0.1-0.1c1-1.4,1.5-3.2,1.5-5c0-5.1-4.1-9.2-9.2-9.2S0.9,5,0.9,10c0,5.1,4.1,9.2,9.2,9.2c1.9,0,3.6-0.6,5-1.5c0,0,0,0.1,0.1,0.1l4.8,4.8c0.7,0.7,1.9,0.7,2.6,0C23.3,21.9,23.3,20.7,22.6,20z M10,16c-3.3,0-6-2.7-6-6c0-3.3,2.7-6,6-6c3.3,0,6,2.7,6,6S13.3,16,10,16z" />
			</symbol>
			<!-- Icon by Madebyoliver: http://www.flaticon.com/free-icon/placeholder_149060#term=location&page=1&position=1 -->
			<symbol id="icon-pin" viewBox="0 0 24 24">
				<title>pin</title>
				<path d="M17.6,2.9L17.6,2.9c-3.1-3.1-8.2-3.1-11.3,0l0,0C3.6,5.7,3.2,11,5.6,14.2l6.4,9.2l6.4-9.2C20.8,11,20.4,5.7,17.6,2.9z M12.1,11.1c-1.5,0-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6s2.6,1.2,2.6,2.6S13.5,11.1,12.1,11.1z" />
			</symbol>
			<symbol id="icon-circle" viewBox="0 0 16 16">
				<circle cx="8" cy="8" r="6.215"></circle>
			</symbol>
		</defs>
	</svg>
	<main>
		<section class="section section--nav" id="Ubax">
			<span class="link-copy"></span>
			<nav class="nav nav--ubax">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Chapter 1</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Chapter 2</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Chapter 3</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Chapter 4</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Chapter 5</span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Chapter 6</span></button>
				<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Chapter 7</span></button>
				<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Chapter 8</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/3.jpg" alt="img03" />
				<h3 class="mockup-slider__title">Ubax</h3>
			</div>
		</section>
		<section class="section section--nav" id="Shamso">
			<span class="link-copy"></span>
			<nav class="nav nav--shamso">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">#vanlife</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">#bohostyle</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">#diy</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">#wine</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">#cabin</span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">#cozy</span></button>
				<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">#creek</span></button>
				<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">#sunshine</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/7.jpg" alt="img07" />
				<h3 class="mockup-slider__title">Shamso</h3>
			</div>
		</section>
		<section class="section section--nav" id="Maxamed">
			<span class="link-copy"></span>
			<nav class="nav nav--maxamed">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Nature</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Funny</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Woods</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Cabin</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Rooms</span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Trees</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/8.jpg" alt="img08" />
				<h3 class="mockup-slider__title">Maxamed</h3>
			</div>
		</section>
		<section class="section section--nav" id="Hagos">
			<span class="link-copy"></span>
			<nav class="nav nav--hagos">
				<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Oops!</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Nah!</span></button>
				<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Hi :P</span></button>
				<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Cute!</span></button>
				<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-bubble"></use></svg><span class="nav__item-title">Yes!</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/14.jpg" alt="img14" />
				<h3 class="mockup-slider__title">Hagos</h3>
			</div>
		</section>
		<section class="section section--nav" id="Zahi">
			<span class="link-copy"></span>
			<nav class="nav nav--zahi">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">1952</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">1953</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">1954</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">1955</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">1956</span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">1957</span></button>
				<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">1958</span></button>
				<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">1959</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/4.jpg" alt="img04" />
				<h3 class="mockup-slider__title">Zahi</h3>
			</div>
		</section>
		<section class="section section--nav" id="Magool">
			<span class="link-copy"></span>
			<nav class="nav nav--magool">
				<button class="nav__item" aria-label="Item 1"></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"></button>
				<button class="nav__item" aria-label="Item 3"></button>
				<button class="nav__item" aria-label="Item 4"></button>
				<button class="nav__item" aria-label="Item 5"></button>
				<button class="nav__item" aria-label="Item 6"></button>
				<button class="nav__item" aria-label="Item 7"></button>
				<button class="nav__item" aria-label="Item 8"></button>
				<button class="nav__item" aria-label="Item 9"></button>
				<button class="nav__item" aria-label="Item 10"></button>
				<button class="nav__item" aria-label="Item 11"></button>
				<button class="nav__item" aria-label="Item 12"></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/5.jpg" alt="img05" />
				<h3 class="mockup-slider__title">Magool</h3>
				<p class="mockup-slider__subtitle">Inspired by <a href="https://dribbble.com/shots/2886526-Brewskies-v2">Brewskies v2</a> by <a href="https://dribbble.com/eatsleepvector">Kevin Yang</a></p>
			</div>
		</section>
		<section class="section section--nav" id="Xusni">
			<span class="link-copy"></span>
			<nav class="nav nav--xusni">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Incipient</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Halcyon</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Surreptitious</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Evanescent</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Vestigial</span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Scintilla</span></button>
				<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Nemesis</span></button>
				<button class="nav__item" aria-label="Item 8"><span class="nav__item-title">Mondegreen</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/1.jpg" alt="img01" />
				<h3 class="mockup-slider__title">Xusni</h3>
			</div>
		</section>
		<section class="section section--nav" id="Beca">
			<span class="link-copy"></span>
			<nav class="nav nav--beca">
				<button class="nav__item" aria-label="Item 0"><span class="nav__item-title"><span>2000</span></span></button>
				<button class="nav__item" aria-label="Item 1"></span><span class="nav__item-title"><span>2001</span></span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title"><span>2002</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title"><span>2003</span></span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title"><span>2004</span></span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title"><span>2005</span></span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title"><span>2006</span></span></button>
				<button class="nav__item" aria-label="Item 7"><span class="nav__item-title"><span>2007</span></span></button>
				<button class="nav__item" aria-label="Item 8"><span class="nav__item-title"><span>2008</span></span></button>
				<button class="nav__item" aria-label="Item 9"><span class="nav__item-title"><span>2009</span></span></button>
				<button class="nav__item" aria-label="Item 10"><span class="nav__item-title"><span>2010</span></span></button>
				<button class="nav__item" aria-label="Item 11"><span class="nav__item-title"><span>2011</span></span></button>
				<button class="nav__item" aria-label="Item 12"><span class="nav__item-title"><span>2012</span></span></button>
				<button class="nav__item" aria-label="Item 13"><span class="nav__item-title"><span>2013</span></span></button>
				<button class="nav__item" aria-label="Item 14"><span class="nav__item-title"><span>2014</span></span></button>
				<button class="nav__item" aria-label="Item 15"><span class="nav__item-title"><span>2015</span></span></button>
				<button class="nav__item" aria-label="Item 16"><span class="nav__item-title"><span>2016</span></span></button>
				<button class="nav__item" aria-label="Item 17"><span class="nav__item-title"><span>2017</span></span></button>
				<button class="nav__item" aria-label="Item 18"><span class="nav__item-title"><span>2018</span></button>
				<button class="nav__item" aria-label="Item 19"><span class="nav__item-title"><span>2019</span></button>
				<button class="nav__item" aria-label="Item 20"><span class="nav__item-title"><span>2020</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/9.jpg" alt="img09" />
				<h3 class="mockup-slider__title">Beca</h3>
			</div>
		</section>
		<section class="section section--nav" id="Etefu">
			<span class="link-copy"></span>
			<nav class="nav nav--etefu">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-inner"></span><span class="nav__item-title">01</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"></span><span class="nav__item-title">02</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-inner"></span><span class="nav__item-title">03</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-inner"></span><span class="nav__item-title">04</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-inner"></span><span class="nav__item-title">05</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/10.jpg" alt="img10" />
				<h3 class="mockup-slider__title">Etefu</h3>
			</div>
		</section>
		<section class="section section--nav" id="Meklit">
			<span class="link-copy"></span>
			<nav class="nav nav--meklit">
				<button class="nav__item" aria-label="Item 0"><span class="nav__item-title"><span>1876</span></span></button>
				<button class="nav__item" aria-label="Item 1"></span><span class="nav__item-title"><span>1890</span></span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title"><span>1921</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title"><span>1923</span></span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title"><span>1936</span></span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title"><span>1937</span></span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/11.jpg" alt="img11" />
				<h3 class="mockup-slider__title">Meklit</h3>
			</div>
		</section>
		<section class="section section--nav" id="Timiro">
			<span class="link-copy"></span>
			<nav class="nav nav--timiro">
				<button class="nav__item" aria-label="Item 1"></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"></button>
				<button class="nav__item" aria-label="Item 3"></button>
				<button class="nav__item" aria-label="Item 4"></button>
				<button class="nav__item" aria-label="Item 5"></button>
				<button class="nav__item" aria-label="Item 6"></button>
				<button class="nav__item" aria-label="Item 7"></button>
				<button class="nav__item" aria-label="Item 8"></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/6.jpg" alt="img06" />
				<h3 class="mockup-slider__title">Timiro</h3>
			</div>
		</section>
		<section class="section section--nav" id="Mariame">
			<span class="link-copy"></span>
			<nav class="nav nav--mariame">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Chapter 1</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-title">Chapter 2</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Chapter 3</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Chapter 4</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Chapter 5</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/12.jpg" alt="img12" />
				<h3 class="mockup-slider__title">Mariame</h3>
			</div>
		</section>
		<section class="section section--nav" id="Desta">
			<span class="link-copy"></span>
			<nav class="nav nav--desta">
				<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 1</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 2</span></button>
				<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 3</span></button>
				<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 4</span></button>
				<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-triangle"></use></svg><span class="nav__item-title">Chapter 5</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/13.jpg" alt="img13" />
				<h3 class="mockup-slider__title">Desta</h3>
			</div>
		</section>
		<section class="section section--nav" id="Berta">
			<span class="link-copy"></span>
			<nav class="nav nav--berta">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-title">Captive #3065</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"></span><span class="nav__item-title">Captive #3066</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-title">Captive #3067</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-title">Captive #3068</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-title">Captive #3069</span></button>
				<button class="nav__item" aria-label="Item 6"><span class="nav__item-title">Captive #3070</span></button>
				<button class="nav__item" aria-label="Item 7"><span class="nav__item-title">Captive #3071</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/15.jpg" alt="img15" />
				<h3 class="mockup-slider__title">Berta</h3>
			</div>
		</section>
		<section class="section section--nav" id="Aman">
			<span class="link-copy"></span>
			<nav class="nav nav--aman">
				<button class="nav__item" aria-label="Item 1"></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"></button>
				<button class="nav__item" aria-label="Item 3"></button>
				<button class="nav__item" aria-label="Item 4"></button>
				<button class="nav__item" aria-label="Item 5"></button>
				<div class="nav__pointer"><svg class="nav__icon nav__icon--magnifier"><use xlink:href="#icon-magnifier"></use></svg></div>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/16.jpg" alt="img16" />
				<h3 class="mockup-slider__title">Aman</h3>
			</div>
		</section>
		<section class="section section--nav" id="Kafa">
			<span class="link-copy"></span>
			<nav class="nav nav--kafa">
				<button class="nav__item" aria-label="Item 1"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-1.svg" alt="Avatar 1" /></span><span class="nav__item-title">John Doe</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-2.svg" alt="Avatar 2" /></span><span class="nav__item-title">Henry Green</span></button>
				<button class="nav__item" aria-label="Item 3"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-3.svg" alt="Avatar 3" /></span><span class="nav__item-title">Terry House</span></button>
				<button class="nav__item" aria-label="Item 4"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-4.svg" alt="Avatar 4" /></span><span class="nav__item-title">Walter Freeman</span></button>
				<button class="nav__item" aria-label="Item 5"><span class="nav__item-inner"><img class="nav__item-img" src="img/avatar-5.svg" alt="Avatar 5" /></span><span class="nav__item-title">Andy Knight</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/2.jpg" alt="img02" />
				<h3 class="mockup-slider__title">Kafa</h3>
			</div>
		</section>
		<section class="section section--nav" id="Totit">
			<span class="link-copy"></span>
			<nav class="nav nav--totit">
				<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Skagway</span></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Kenai</span></button>
				<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Fairbanks</span></button>
				<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Ketchikan</span></button>
				<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-pin"></use></svg><span class="nav__item-title">Juneau</span></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/8.jpg" alt="img8" />
				<h3 class="mockup-slider__title">Totit</h3>
			</div>
		</section>
		<section class="section section--nav" id="Ayana">
			<span class="link-copy"></span>
			<nav class="nav nav--ayana">
				<button class="nav__item" aria-label="Item 1"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
				<button class="nav__item nav__item--current" aria-label="Item 2"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
				<button class="nav__item" aria-label="Item 3"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
				<button class="nav__item" aria-label="Item 4"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
				<button class="nav__item" aria-label="Item 5"><svg class="nav__icon"><use xlink:href="#icon-circle"></use></svg></button>
			</nav>
			<!-- Mockup slider for decorative purpose only -->
			<div class="mockup-slider">
				<img src="img/17.jpg" alt="img17" />
				<h3 class="mockup-slider__title">Ayana</h3>
			</div>
		</section>
	</main>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 加載動畫 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 導航切換 菜單切換 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子