以下是 html5分页导航按钮样式动画特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5分页导航按钮样式动画特效 </title>
<!---<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" />
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
<script>document.documentElement.className = 'js';</script>
</head>
<body>
<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="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>
<script src="js/clipboard.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
JS代码(clipboard.min.js):
/*! * clipboard.js v1.5.5 * https://zenorocha.github.io/clipboard.js * * Licensed MIT 漏 Zeno Rocha */
!function(t){
if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();
else if("function"==typeof define&&define.amd)define([],t);
else{
var e;
e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.Clipboard=t()}
}
(function(){
var t,e,n;
return function t(e,n,r){
function o(a,c){
if(!n[a]){
if(!e[a]){
var s="function"==typeof require&&require;
if(!c&&s)return s(a,!0);
if(i)return i(a,!0);
var u=new Error("Cannot find module '"+a+"'");
throw u.code="MODULE_NOT_FOUND",u}
var l=n[a]={
exports:{
}
}
;
e[a][0].call(l.exports,function(t){
var n=e[a][1][t];
return o(n?n:t)}
,l,l.exports,t,e,n,r)}
return n[a].exports}
for(var i="function"==typeof require&&require,a=0;
a<r.length;
a++)o(r[a]);
return o}
({
1:[function(t,e,n){
var r=t("matches-selector");
e.exports=function(t,e,n){
for(var o=n?t:t.parentNode;
o&&o!==document;
){
if(r(o,e))return o;
o=o.parentNode}
}
}
,{
"matches-selector":2}
],2:[function(t,e,n){
function r(t,e){
if(i)return i.call(t,e);
for(var n=t.parentNode.querySelectorAll(e),r=0;
r<n.length;
++r)if(n[r]==t)return!0;
return!1}
var o=Element.prototype,i=o.matchesSelector||o.webkitMatchesSelector||o.mozMatchesSelector||o.msMatchesSelector||o.oMatchesSelector;
e.exports=r}
,{
}
],3:[function(t,e,n){
function r(t,e,n,r){
var i=o.apply(this,arguments);
return t.addEventListener(n,i),{
destroy:function(){
t.removeEventListener(n,i)}
}
}
function o(t,e,n,r){
return function(n){
n.delegateTarget=i(n.target,e,!0),n.delegateTarget&&r.call(t,n)}
}
var i=t("closest");
e.exports=r}
,{
closest:1}
],4:[function(t,e,n){
n.node=function(t){
return void 0!==t&&t instanceof HTMLElement&&1===t.nodeType}
,n.nodeList=function(t){
var e=Object.prototype.toString.call(t);
return void 0!==t&&("[object NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in t&&(0===t.length||n.node(t[0]))}
,n.string=function(t){
return"string"==typeof t||t instanceof String}
,n.function=function(t){
var e=Object.prototype.toString.call(t);
return"[object Function]"===e}
}
,{
}
],5:[function(t,e,n){
function r(t,e,n){
if(!t&&!e&&!n)throw new Error("Missing required arguments");
if(!c.string(e))throw new TypeError("Second argument must be a String");
if(!c.function(n))throw new TypeError("Third argument must be a Function");
if(c.node(t))return o(t,e,n);
if(c.nodeList(t))return i(t,e,n);
if(c.string(t))return a(t,e,n);
throw new TypeError("First argument must be a String,HTMLElement,HTMLCollection,or NodeList")}
function o(t,e,n){
return t.addEventListener(e,n),{
destroy:function(){
t.removeEventListener(e,n)}
}
}
function i(t,e,n){
return Array.prototype.forEach.call(t,function(t){
t.addEventListener(e,n)}
),{
destroy:function(){
Array.prototype.forEach.call(t,function(t){
t.removeEventListener(e,n)}
)}
}
}
function a(t,e,n){
return s(document.body,t,e,n)}
var c=t("./is"),s=t("delegate");
e.exports=r}
,{
"./is":4,delegate:3}
],6:[function(t,e,n){
function r(t){
var e;
if("INPUT"===t.nodeName||"TEXTAREA"===t.nodeName)t.focus(),t.setSelectionRange(0,t.value.length),e=t.value;
else{
t.hasAttribute("contenteditable")&&t.focus();
var n=window.getSelection(),r=document.createRange();
r.selectNodeContents(t),n.removeAllRanges(),n.addRange(r),e=n.toString()}
return e}
e.exports=r}
,{
}
],7:[function(t,e,n){
function r(){
}
r.prototype={
on:function(t,e,n){
var r=this.e||(this.e={
}
);
return(r[t]||(r[t]=[])).push({
fn:e,ctx:n}
),this}
,once:function(t,e,n){
function r(){
o.off(t,r),e.apply(n,arguments)}
var o=this;
return r._=e,this.on(t,r,n)}
,emit:function(t){
var e=[].slice.call(arguments,1),n=((this.e||(this.e={
}
))[t]||[]).slice(),r=0,o=n.length;
for(r;
o>r;
r++)n[r].fn.apply(n[r].ctx,e);
return this}
,off:function(t,e){
var n=this.e||(this.e={
}
),r=n[t],o=[];
if(r&&e)for(var i=0,a=r.length;
a>i;
i++)r[i].fn!==e&&r[i].fn._!==e&&o.push(r[i]);
return o.length?n[t]=o:delete n[t],this}
}
,e.exports=r}
,{
}
],8:[function(t,e,n){
"use strict";
function r(t){
return t&&t.__esModule?t:{
"default":t}
}
function o(t,e){
if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}
n.__esModule=!0;
var i=function(){
function t(t,e){
for(var n=0;
n<e.length;
n++){
var r=e[n];
r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}
}
return function(e,n,r){
return n&&t(e.prototype,n),r&&t(e,r),e}
}
(),a=t("select"),c=r(a),s=function(){
function t(e){
o(this,t),this.resolveOptions(e),this.initSelection()}
return t.prototype.resolveOptions=function t(){
var e=arguments.length<=0||void 0===arguments[0]?{
}
:arguments[0];
this.action=e.action,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}
,t.prototype.initSelection=function t(){
if(this.text&&this.target)throw new Error('Multiple attributes declared,use either "target" or "text"');
if(this.text)this.selectFake();
else{
if(!this.target)throw new Error('Missing required attributes,use either "target" or "text"');
this.selectTarget()}
}
,t.prototype.selectFake=function t(){
var e=this;
this.removeFake(),this.fakeHandler=document.body.addEventListener("click",function(){
return e.removeFake()}
),this.fakeElem=document.createElement("textarea"),this.fakeElem.style.position="absolute",this.fakeElem.style.left="-9999px",this.fakeElem.style.top=(window.pageYOffset||document.documentElement.scrollTop)+"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,document.body.appendChild(this.fakeElem),this.selectedText=c.default(this.fakeElem),this.copyText()}
,t.prototype.removeFake=function t(){
this.fakeHandler&&(document.body.removeEventListener("click"),this.fakeHandler=null),this.fakeElem&&(document.body.removeChild(this.fakeElem),this.fakeElem=null)}
,t.prototype.selectTarget=function t(){
this.selectedText=c.default(this.target),this.copyText()}
,t.prototype.copyText=function t(){
var e=void 0;
try{
e=document.execCommand(this.action)}
catch(n){
e=!1}
this.handleResult(e)}
,t.prototype.handleResult=function t(e){
e?this.emitter.emit("success",{
action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}
):this.emitter.emit("error",{
action:this.action,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)}
)}
,t.prototype.clearSelection=function t(){
this.target&&this.target.blur(),window.getSelection().removeAllRanges()}
,t.prototype.destroy=function t(){
this.removeFake()}
,i(t,[{
key:"action",set:function t(){
var e=arguments.length<=0||void 0===arguments[0]?"copy":arguments[0];
if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value,use either "copy" or "cut"')}
,get:function t(){
return this._action}
}
,{
key:"target",set:function t(e){
if(void 0!==e){
if(!e||"object"!=typeof e||1!==e.nodeType)throw new Error('Invalid "target" value,use a valid Element');
this._target=e}
}
,get:function t(){
return this._target}
}
]),t}
();
n.default=s,e.exports=n.default}
,{
select:6}
],9:[function(t,e,n){
"use strict";
function r(t){
return t&&t.__esModule?t:{
"default":t}
}
function o(t,e){
if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}
function i(t,e){
if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function,not "+typeof e);
t.prototype=Object.create(e&&e.prototype,{
constructor:{
value:t,enumerable:!1,writable:!0,configurable:!0}
}
),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}
function a(t,e){
var n="data-clipboard-"+t;
if(e.hasAttribute(n))return e.getAttribute(n)}
n.__esModule=!0;
var c=t("./clipboard-action"),s=r(c),u=t("tiny-emitter"),l=r(u),f=t("good-listener"),d=r(f),h=function(t){
function e(n,r){
o(this,e),t.call(this),this.resolveOptions(r),this.listenClick(n)}
return i(e,t),e.prototype.resolveOptions=function t(){
var e=arguments.length<=0||void 0===arguments[0]?{
}
:arguments[0];
this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText}
,e.prototype.listenClick=function t(e){
var n=this;
this.listener=d.default(e,"click",function(t){
return n.onClick(t)}
)}
,e.prototype.onClick=function t(e){
var n=e.delegateTarget||e.currentTarget;
this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new s.default({
action:this.action(n),target:this.target(n),text:this.text(n),trigger:n,emitter:this}
)}
,e.prototype.defaultAction=function t(e){
return a("action",e)}
,e.prototype.defaultTarget=function t(e){
var n=a("target",e);
return n?document.querySelector(n):void 0}
,e.prototype.defaultText=function t(e){
return a("text",e)}
,e.prototype.destroy=function t(){
this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}
,e}
(l.default);
n.default=h,e.exports=n.default}
,{
"./clipboard-action":8,"good-listener":5,"tiny-emitter":7}
]}
,{
}
,[9])(9)}
);
JS代码(main.js):
/** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2016,Codrops * http://www.codrops.com */
;
(function(window){
'use strict';
function init(){
[].slice.call(document.querySelectorAll('.nav')).forEach(function(nav){
var navItems = [].slice.call(nav.querySelectorAll('.nav__item')),itemsTotal = navItems.length,setCurrent = function(item){
// return if already currentif( item.classList.contains('nav__item--current') ){
return false;
}
// remove currentvar currentItem = nav.querySelector('.nav__item--current');
currentItem.classList.remove('nav__item--current');
// set currentitem.classList.add('nav__item--current');
}
;
navItems.forEach(function(item){
item.addEventListener('click',function(){
setCurrent(item);
}
);
}
);
}
);
[].slice.call(document.querySelectorAll('.link-copy')).forEach(function(link){
link.setAttribute('data-clipboard-text',location.protocol + '//' + location.host + location.pathname + '#' + link.parentNode.id);
new Clipboard(link);
link.addEventListener('click',function(){
link.classList.add('link-copy--animate');
setTimeout(function(){
link.classList.remove('link-copy--animate');
}
,300);
}
);
}
);
}
init();
}
)(window);
CSS代码(demo.css):
*,*::after,*::before{-webkit-box-sizing:border-box;box-sizing:border-box;}
body{font-family:"Microsoft YaHei",'Roboto Mono',monospace;color:#1b3050;background:#f9f0d0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{text-decoration:none;color:#8bc34a;outline:none;}
a:hover,a:focus{color:#fff;}
.hidden{position:absolute;overflow:hidden;width:0;height:0;pointer-events:none;}
/* Icons */
.icon{display:block;width:1.5em;height:1.5em;margin:0 auto;fill:currentColor;}
/* Content */
.content{padding:3em 0;}
.section{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;}
.section--nav{position:relative;overflow:hidden;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}
.section__title{font-size:0.65em;font-weight:700;-webkit-flex:none;flex:none;margin:3em 0 15em;text-indent:3px;letter-spacing:3px;text-transform:uppercase;color:#d1d1d1;}
.section.section--intro{font-size:1.6em;position:relative;min-height:100vh;text-align:center;color:#fff;background:#333;}
.section--intro p{max-width:1000px;margin:0 auto;padding:1em;}
.link-copy{position:absolute;top:2em;right:2em;width:20px;height:20px;z-index:100;cursor:pointer;background:url(../img/link.svg) no-repeat center center;background-size:cover;}
.link-copy::after{content:'Click to copy direct link';font-family:'Roboto Condensed',sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:0.75em;line-height:1.75;font-weight:bold;position:absolute;right:100%;margin:0 1em 0 0;white-space:nowrap;pointer-events:none;opacity:0;color:currentColor;-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0);-webkit-transition:-webkit-transform 0.3s,opacity 0.3s;transition:transform 0.3s,opacity 0.3s;}
.link-copy:hover::after{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.link-copy::before{content:'';position:absolute;top:50%;left:50%;width:50px;height:50px;margin:-25px 0 0 -25px;opacity:0;border-radius:50%;background:currentColor;}
.link-copy--animate::before{-webkit-animation:pulse 0.3s;animation:pulse 0.3s;}
@-webkit-keyframes pulse{from{opacity:1;-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);}
to{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}
}
@keyframes pulse{from{opacity:1;-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);}
to{opacity:0;transform:scale3d(1,1,1);webkit-transform:scale3d(1,1,1);}
}
/* Mockup Slider */
.mockup-slider{position:relative;width:calc(100% - 12em);margin:0 0 0 2em;max-width:600px;}
.mockup-slider::before,.mockup-slider::after{content:'';width:100%;background:rgba(0,0,0,0.05);height:100px;position:absolute;top:0;}
.mockup-slider::after{top:auto;bottom:0;}
.mockup-slider img{position:relative;display:block;max-width:100%;margin:150px 0;box-shadow:0 10px 20px -4px rgba(0,0,0,0.6);}
.mockup-slider__title{position:absolute;font-size:3em;bottom:30%;left:-0.5em;font-weight:normal;margin:0;}
.mockup-slider__subtitle{position:absolute;top:70%;left:-1em;background:#1b3050;margin:0;color:#fff;font-size:1.05em;padding:0.25em 0.5em;z-index:100;}
/* Individual section colors */
/* Xusni */
.section#Xusni{background:#3f51b5;color:#212956;}
/* Magool */
.section#Magool{background:#b5bf4b;color:#fff;}
.section#Magool .mockup-slider__subtitle{background:#f44336;}
.section#Magool .mockup-slider__subtitle a{color:#ddd;font-weight:bold;}
/* Ubax */
.section#Ubax{background:#e9eae5;color:#31312f;}
/* Zahi */
.section#Zahi{background:#f44336;color:#fff;}
/* Timiro */
.section#Timiro{background:#eae096;color:#ff5722;}
/* Shamso */
.section#Shamso{background:#93b1c5;color:#ff98bb;}
/* Maxamed */
.section#Maxamed{background:#78b395;color:#fff;}
/* Beca */
.section#Beca{background:#a7a7a7;color:#ffeb3b;min-height:510px;}
.section#Beca .mockup-slider{margin:0 0 0 -9em;min-height:510px;}
/* Etefu */
.section#Etefu{background:#62ea80;color:#fff;}
/* Meklit */
.section#Meklit{background:#27272b;color:#ff4d3b;min-height:510px;}
.section#Meklit .mockup-slider{margin:0 0 0 -9em;min-height:510px;}
/* Mariame */
.section#Mariame{background:#a9a9d4;color:#5050b9;}
/* Desta */
.section#Desta{background:#1e1b2c;color:#f39468;}
.section#Desta .mockup-slider__title:first-letter{color:#fff;}
/* Hagos */
.section#Hagos{background:#92d9c7;color:#fff;}
/* Berta */
.section#Berta{background:#ff6666;color:#ffe7db;min-height:510px;}
.section#Berta .mockup-slider{min-height:510px;}
/* Aman */
.section#Aman{background:#f7f5ed;color:#d6856d;}
/* Kafa */
.section#Kafa{background:#d2f1ca;color:#e54f4f;}
/* Kafa */
.section#Totit{background:#3992fd;color:#fff;}
/* Ayana */
.section#Ayana{background:#738aa0;color:#fffefd;}
@media screen and (max-width:50em){.section.section--intro{font-size:1em;}
.section--nav{padding:4em 0;}
.section--nav::before{content:attr(id);position:absolute;top:1em;right:1em;}
.mockup-slider{display:none;}
.nav{-webkit-flex:none;flex:none;margin:0 auto;}
.nav.nav--berta{width:100%;}
}
分享到QQ
分享到微博
微信扫一扫
