代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<title>underline.js -- A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://brick.a.ssl.fastly.net/EB+Garamond:400,400i/Fira+Sans:300,400,500,700/Source+Code+Pro:300,400">
<link rel="icon" href="favicon.png" type="image/x-icon"/>
<link type="text/css" rel="stylesheet" href="css/underline.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://code.createjs.com/soundjs-0.6.0.min.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/baseline-ratio.js"></script>
<script type="text/javascript" src="js/underline.js"></script>
<script type="text/javascript" src="js/guitar-string.js"></script>
<script type="text/javascript" src="js/single-underline.js"></script>
<script type="text/javascript" src="js/multiple-underline.js"></script>
<script type="text/javascript">
window.heap=window.heap||[],heap.load=function(t,e){window.heap.appid=t,window.heap.config=e;var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"===document.location.protocol?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+t+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(t){return function(){heap.push([t].concat(Array.prototype.slice.call(arguments,0)))}},p=["clearEventProperties","identify","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
heap.load("749437306");
</script>
</head>
<body>
<div class="audio">
<audio id="audio00" src="audio/cello_00.mp3" preload="auto"></audio>
<audio id="audio01" src="audio/cello_01.mp3" preload="auto"></audio>
<audio id="audio02" src="audio/cello_02.mp3" preload="auto"></audio>
<audio id="audio03" src="audio/cello_03.mp3" preload="auto"></audio>
<audio id="audio04" src="audio/cello_04.mp3" preload="auto"></audio>
<audio id="audio05" src="audio/cello_05.mp3" preload="auto"></audio>
<audio id="audio06" src="audio/cello_06.mp3" preload="auto"></audio>
<audio id="audio07" src="audio/cello_07.mp3" preload="auto"></audio>
<audio id="audio08" src="audio/cello_08.mp3" preload="auto"></audio>
<audio id="audio09" src="audio/cello_09.mp3" preload="auto"></audio>
<audio id="audio10" src="audio/cello_10.mp3" preload="auto"></audio>
<audio id="audio11" src="audio/cello_11.mp3" preload="auto"></audio>
<audio id="audio12" src="audio/cello_12.mp3" preload="auto"></audio>
<audio id="audio13" src="audio/cello_13.mp3" preload="auto"></audio>
<audio id="audio14" src="audio/cello_14.mp3" preload="auto"></audio>
<audio id="audio15" src="audio/cello_15.mp3" preload="auto"></audio>
<audio id="audio16" src="audio/cello_16.mp3" preload="auto"></audio>
<audio id="audio17" src="audio/cello_17.mp3" preload="auto"></audio>
<audio id="audio18" src="audio/cello_18.mp3" preload="auto"></audio>
<audio id="audio19" src="audio/cello_19.mp3" preload="auto"></audio>
</div>
<header>
<a href="http://wentin.github.io/underlineJS" class="logo">
<svg width="264px" height="60px" viewBox="0 0 264 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>long logo svg</title>
<path d="M228.791267,51 L1,51 L1,50 L229.085953,50 L228.791267,51 Z M237.453093,51 L263,51 L263,50 L237.751822,50 L237.453093,51 Z" id="line"></path>
<path d="M14.66,40.84 C14.12,42.04 15.02,43.84 16.22,43.84 C20,43.84 23.24,41.02 26.36,37.24 C26.48,37.06 26.66,36.7 26.66,36.4 C26.66,36.1 26.36,35.86 26.12,35.86 C26.06,35.86 26,35.86 25.94,35.92 C25.34,36.52 21.38,40.18 19.46,40.18 C18.74,40.18 18.62,39.4 19.28,37.84 L26.18,22 C26.78,20.62 26.96,19.9 26.96,19.54 C26.96,18.82 26.54,18.16 25.7,18.16 C25.4,18.16 24.92,18.22 24.38,19.24 C23.54,20.8 17.36,29.44 12.08,34.84 C8.36,38.68 6.8,40 5.96,40 C5.12,40 5.42,38.38 6.14,36.76 L13.4,20.62 C14.36,18.76 13.7,17.92 12.5,17.92 C10.76,17.92 6.2,20.2 3.2,24.22 C2.54,25.12 2.48,25.72 2.48,26.02 C2.48,26.26 3.08,26.38 3.26,26.2 C5,24.64 7.28,22.66 7.94,22.66 C8.54,22.66 7.4,25.48 6.86,26.8 L1.46,39.7 C0.8,41.2 0.56,43.84 2.18,43.84 C5.54,43.84 10.04,39.46 18.38,30.34 C18.8,29.86 19.46,29.86 19.1,30.82 C18.5,32.5 16.34,37.24 14.66,40.84 L14.66,40.84 Z M44.84,40.84 C44.3,42.28 45.2,43.84 46.4,43.84 C50.18,43.84 53.6,41.02 56.72,37.24 C56.84,37.06 56.96,36.7 56.96,36.4 C56.96,36.1 56.72,35.86 56.48,35.86 C56.42,35.86 56.36,35.86 56.3,35.92 C55.7,36.52 51.86,40 49.94,40 C49.22,40 48.98,39.4 49.64,37.84 L54.14,26.08 C56.36,20.26 54.5,18.16 52.16,18.16 C48.26,18.16 43.16,22.12 38.3,30.52 C38.06,30.94 37.52,30.88 37.76,30.28 L41,21.4 C41.96,18.88 40.34,18.16 38.72,18.16 C36.02,18.22 34.46,19.48 33.14,21.16 C32.6,21.82 32.06,23.44 32.12,24.16 C32.24,24.76 32.72,24.76 33.02,24.4 C34.94,21.88 36.14,21.64 37.34,21.64 C38.12,21.64 37.88,22.54 37.22,24.28 L32,37.96 C31.16,40.24 30.68,41.62 30.68,41.98 C30.68,42.7 31.1,44.02 31.7,44.02 C32.66,44.02 33.56,42.16 35.66,38.32 C38.06,33.94 42.38,27.46 44.24,25.18 C46.88,21.94 49.1,20.62 50.42,20.68 C51.38,20.74 52.46,20.98 51.14,24.46 L44.84,40.84 Z M80.96,36.58 L90.86,2.38 C91.04,1.72 91.1,0.7 90.68,0.7 C90.08,0.7 86.42,1.24 85.34,1.42 C84.44,1.54 83.3,1.6 83.3,2.5 C83.3,3.34 87.08,2.98 86,6.34 L81.74,19.48 C81.56,19.96 81.26,20.08 80.9,19.36 C80.42,18.46 79.22,17.8 78.44,17.8 C75.5,17.8 71.48,19.96 68.24,23.14 C63.2,28 59.42,35.14 59.42,40.18 C59.42,42.28 61.16,43.84 63.02,43.84 C68.36,43.84 73.4,39.52 77.48,34.24 C77.72,33.94 78.02,34.18 77.84,34.84 C77.36,36.52 77,38.38 77,40.84 C77,42.16 77.36,43.84 78.56,43.84 C82.34,43.84 85.22,41.02 88.34,37.24 C88.46,37.06 88.64,36.7 88.64,36.4 C88.64,36.1 88.34,35.86 88.1,35.86 C88.04,35.86 87.98,35.86 87.92,35.92 C87.32,36.52 83.48,40 81.56,40 C80.84,40 80.48,38.2 80.96,36.58 L80.96,36.58 Z M63.62,39.34 C63.56,32.44 74.12,19.66 77.84,19.66 C79.4,19.66 80.48,21.22 80.48,22.78 C80.48,26.14 79.22,29.68 77.06,32.5 C73.94,36.58 68.3,41.92 65.12,41.92 C63.98,41.92 63.62,40.96 63.62,39.34 L63.62,39.34 Z M105.8,19.9 C107,19.9 107.48,20.74 107.48,21.82 C107.48,26.62 99.8,28.24 98,28.24 C97.7,28.24 97.58,28.24 97.58,27.88 C97.58,26.08 102.5,19.9 105.8,19.9 L105.8,19.9 Z M96.26,43.9 C100.46,43.9 104.12,41.44 106.52,37.54 C106.64,37.36 106.64,37.18 106.64,37.06 C106.64,36.7 106.4,36.46 106.04,36.46 C105.74,36.46 105.32,36.64 104.96,37.12 C103.76,38.68 101.36,40.9 98.48,40.9 C96.44,40.9 95.48,39.28 95.48,36.28 C95.48,33.76 95.66,32.38 96.5,30.58 C96.74,30.1 96.92,29.98 97.4,29.98 C101.6,29.98 111.14,26.74 111.14,21.94 C111.14,19.48 109.94,18.16 106.7,18.16 C97.28,18.16 91.16,29.92 91.16,37.12 C91.16,41.68 93.92,43.9 96.26,43.9 L96.26,43.9 Z M127.58,25.12 C129.56,22.54 130.88,21.16 131.66,21.16 C132.5,21.16 132.74,22.42 132.8,23.62 C132.86,24.7 133.1,25.72 134,25.72 C135.68,25.72 136.52,22.66 136.52,21.04 C136.52,19.42 135.32,17.86 133.52,17.86 C131.24,17.86 127.28,21.7 121.46,30.52 C121.22,30.94 120.92,30.88 121.22,30.28 C123.08,26.44 124.58,23.08 124.58,20.86 C124.58,19.18 123.56,18.16 121.88,18.16 C119.18,18.16 117.62,19.48 116.3,21.16 C115.76,21.82 115.22,23.44 115.28,24.16 C115.4,24.76 115.88,24.76 116.18,24.4 C118.1,21.88 119.3,21.64 120.5,21.64 C121.28,21.64 121.04,22.54 120.38,24.28 L115.16,37.96 C114.32,40.24 113.84,41.62 113.84,41.98 C113.84,42.7 114.26,44.02 114.86,44.02 C115.82,44.02 117.08,42.16 119.18,38.32 C121.58,33.94 125.78,27.46 127.58,25.12 L127.58,25.12 Z M147.2,37.06 C146.6,37.66 143.3,40.54 141.38,40.54 C140.96,40.54 140.78,40.18 140.78,39.58 C140.78,39.1 140.9,38.5 141.08,37.84 L151.4,2.56 C151.58,2.02 151.64,1.84 151.64,1.18 C151.64,0.58 150.98,0.58 150.62,0.58 C149.66,0.58 145.58,1.84 143.78,2.74 C143.54,2.86 143.42,3.1 143.42,3.4 C143.42,4.12 146.42,4.24 146.42,5.56 C146.42,6.58 145.94,8.32 145.58,9.46 L136.88,38.44 C136.46,39.88 136.22,40.72 136.22,41.74 C136.22,42.88 136.94,43.84 138.86,43.84 C140.96,43.84 148.7,40.18 148.7,36.58 C148.7,36.1 148.7,35.8 148.4,35.8 C148.1,35.8 147.68,36.58 147.2,37.06 L147.2,37.06 Z M163.94,6.22 C162.02,6.22 160.58,7.96 160.58,9.88 C160.58,11.08 161.48,12.22 162.68,12.22 C164.48,12.22 165.98,10.6 165.98,8.8 C165.98,7.54 165.2,6.22 163.94,6.22 L163.94,6.22 Z M152,38.44 C151.46,39.82 151.28,40.36 151.28,41.74 C151.28,42.88 151.94,43.84 153.86,43.84 C155.96,43.84 163.7,40.72 163.7,36.1 C163.7,35.92 163.52,35.8 163.34,35.8 C163.22,35.8 163.16,35.86 163.1,35.92 C162.5,36.52 158.3,40.54 156.38,40.54 C155.96,40.54 155.66,40.18 155.66,39.58 C155.66,39.1 155.84,38.5 156.08,37.84 L162.26,20.8 C162.62,19.78 162.86,19 162.86,18.16 C162.86,17.5 162.08,17.74 161.72,17.92 C158.06,19.96 155.9,21.28 151.94,24.1 C151.46,24.46 151.4,24.7 151.4,25 C151.4,25.24 152.06,25.42 152.3,25.3 C154.1,24.46 155.66,23.92 156.32,23.92 C157.1,23.92 156.8,25.42 156.32,26.8 L152,38.44 Z M182.24,40.84 C181.7,42.28 182.6,43.84 183.8,43.84 C187.58,43.84 191,41.02 194.12,37.24 C194.24,37.06 194.36,36.7 194.36,36.4 C194.36,36.1 194.12,35.86 193.88,35.86 C193.82,35.86 193.76,35.86 193.7,35.92 C193.1,36.52 189.26,40 187.34,40 C186.62,40 186.38,39.4 187.04,37.84 L191.54,26.08 C193.76,20.26 191.9,18.16 189.56,18.16 C185.66,18.16 180.56,22.12 175.7,30.52 C175.46,30.94 174.92,30.88 175.16,30.28 L178.4,21.4 C179.36,18.88 177.74,18.16 176.12,18.16 C173.42,18.22 171.86,19.48 170.54,21.16 C170,21.82 169.46,23.44 169.52,24.16 C169.64,24.76 170.12,24.76 170.42,24.4 C172.34,21.88 173.54,21.64 174.74,21.64 C175.52,21.64 175.28,22.54 174.62,24.28 L169.4,37.96 C168.56,40.24 168.08,41.62 168.08,41.98 C168.08,42.7 168.5,44.02 169.1,44.02 C170.06,44.02 170.96,42.16 173.06,38.32 C175.46,33.94 179.78,27.46 181.64,25.18 C184.28,21.94 186.5,20.62 187.82,20.68 C188.78,20.74 189.86,20.98 188.54,24.46 L182.24,40.84 Z M212.42,19.9 C213.62,19.9 214.1,20.74 214.1,21.82 C214.1,26.62 206.42,28.24 204.62,28.24 C204.32,28.24 204.2,28.24 204.2,27.88 C204.2,26.08 209.12,19.9 212.42,19.9 L212.42,19.9 Z M202.88,43.9 C207.08,43.9 210.74,41.44 213.14,37.54 C213.26,37.36 213.26,37.18 213.26,37.06 C213.26,36.7 213.02,36.46 212.66,36.46 C212.36,36.46 211.94,36.64 211.58,37.12 C210.38,38.68 207.98,40.9 205.1,40.9 C203.06,40.9 202.1,39.28 202.1,36.28 C202.1,33.76 202.28,32.38 203.12,30.58 C203.36,30.1 203.54,29.98 204.02,29.98 C208.22,29.98 217.76,26.74 217.76,21.94 C217.76,19.48 216.56,18.16 213.32,18.16 C203.9,18.16 197.78,29.92 197.78,37.12 C197.78,41.68 200.54,43.9 202.88,43.9 L202.88,43.9 Z" id="underline"></path>
<path d="M222.64,36.94 C220.48,36.94 218.74,38.68 218.74,40.84 C218.74,42.4 219.88,43.84 221.44,43.84 C223.6,43.84 225.34,42.1 225.34,39.94 C225.34,38.38 224.2,36.94 222.64,36.94 L222.64,36.94 Z M245.5,6.22 C243.58,6.22 242.14,7.96 242.14,9.88 C242.14,11.08 243.04,12.22 244.24,12.22 C246.04,12.22 247.54,10.6 247.54,8.8 C247.54,7.54 246.76,6.22 245.5,6.22 L245.5,6.22 Z M238.3,26.8 L230.98,51.64 C229.96,55.12 228.58,57.52 226.42,57.52 C223.72,57.52 223.24,55.06 221.8,55.06 C220.96,55.06 219.64,56.92 219.64,57.7 C219.64,58.84 221.26,59.98 224.08,59.98 C228.34,59.98 233.92,55.3 235.78,49.12 L244.24,20.8 C244.54,19.78 244.84,19 244.84,18.16 C244.84,17.5 244.06,17.74 243.7,17.92 C240.04,19.96 237.88,21.28 233.92,24.1 C233.44,24.46 233.38,24.7 233.38,25 C233.38,25.24 234.04,25.42 234.28,25.3 C236.08,24.46 237.64,23.92 238.3,23.92 C239.08,23.92 238.72,25.42 238.3,26.8 L238.3,26.8 Z M260.02,18.16 C257.8,18.16 252.04,21.7 252.04,26.5 C252.04,27.7 252.82,29.5 253.96,31.6 C254.8,33.16 255.46,35.08 255.4,37.36 C255.34,39.28 254.02,40.96 251.98,40.96 C248.56,40.96 247.48,38.44 246.52,38.44 C245.92,38.44 244.84,40.3 244.84,41.2 C244.84,42.4 246.04,43.84 248.08,43.84 C252.88,43.84 259.24,40.36 259.24,35.62 C259.24,33.82 258.4,31 257.44,29.38 C256.48,27.76 255.46,24.88 255.46,23.86 C255.46,22.12 256.54,20.92 257.86,20.92 C260.02,20.92 260.5,22.9 261.4,22.9 C262.12,22.9 263.08,21.1 263.08,20.38 C263.08,19.72 261.88,18.16 260.02,18.16 L260.02,18.16 Z" id="js"></path>
</svg>
</a>
<div class="hamburger"><i></i></div>
<div class="menu">
<a href="https://github.com/wentin/underlineJS" target="_blank" class="github icon-github">Star underline.js</a>
</div>
</header>
<div class="trigger"></div>
<article>
<h1>Live Demo</h1>
<p>
<a href="#" class="underline title">Twelfth Night</a>
</p>
<p class="text">
<a href="#" class="underline">Make me a willow cabin</a>
<br>
<a href="#" class="underline">at your gate</a>
<br>
<a href="#" class="underline">And call upon my soul within the house.</a>
<br>
<a href="#" class="underline">Write loyal cantons of</a>
<br>
<a href="#" class="underline">contemned love</a>
<br>
<a href="#" class="underline">And sing them loud</a>
<br>
<a href="#" class="underline">even in the dead of night.</a>
<br>
<a href="#" class="underline">Halloo your name</a>
<br>
<a href="#" class="underline">to the reverberate hills</a>
<br>
<a href="#" class="underline">And make the babbling gossip of the air</a>
<br>
<a href="#" class="underline">Cry out “Olivia!”</a>
<br>
<a href="#" class="underline">Oh,</a>
<br>
<a href="#" class="underline">you should not rest</a>
<br>
<a href="#" class="underline">Between the elements of air and earth,</a>
<br>
<a href="#" class="underline">But you should pity me.</a>
<br>
</p>
</article>
<footer>
<a href="https://twitter.com/intent/tweet?text=underline.js: A quest to pixel-perfect underline with canvas, and music&via=DesignJokes&url=http://wentin.github.io/underlineJS/&hashtags=UnderlineJS" target="_blank" class="share icon-share">
</a>
</footer>
<script>
(function() {
// detect if IE : from http://stackoverflow.com/a/16657946
var ie = (function(){
var undef,rv = -1; // Return value assumes failure.
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var trident = ua.indexOf('Trident/');
if (msie > 0) {
// IE 10 or older => return version number
rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
} else if (trident > 0) {
// IE 11 (or newer) => return version number
var rvNum = ua.indexOf('rv:');
rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
}
return ((rv > -1) ? rv : undef);
}());
// disable/enable scroll (mousewheel and keys) from http://stackoverflow.com/a/4770179
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = [32, 37, 38, 39, 40], wheelIter = 0;
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function keydown(e) {
for (var i = keys.length; i--;) {
if (e.keyCode === keys[i]) {
preventDefault(e);
return;
}
}
}
function touchmove(e) {
preventDefault(e);
}
function wheel(e) {
// for IE
//if( ie ) {
//preventDefault(e);
//}
}
function disable_scroll() {
window.onmousewheel = document.onmousewheel = wheel;
document.onkeydown = keydown;
document.body.ontouchmove = touchmove;
}
function enable_scroll() {
window.onmousewheel = document.onmousewheel = document.onkeydown = document.body.ontouchmove = null;
}
var docElem = window.document.documentElement,
scrollVal,
isRevealed,
noscroll,
isAnimating,
container = document.body,
trigger = container.querySelector( '.trigger' );
function scrollY() {
return window.pageYOffset || docElem.scrollTop;
}
function scrollPage() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth >= 800) {
scrollVal = scrollY();
if( noscroll && !ie ) {
if( scrollVal < 0 ) return false;
// keep it that way
window.scrollTo( 0, 0 );
}
if( classie.has( container, 'notrans' ) ) {
classie.remove( container, 'notrans' );
return false;
}
if( isAnimating ) {
return false;
}
if( scrollVal <= 0 && isRevealed ) {
toggle(0);
}
else if( scrollVal > 0 && !isRevealed ){
toggle(1);
}
}
}
function toggle( reveal ) {
isAnimating = true;
if( reveal ) {
classie.add( container, 'collapse' );
}
else {
noscroll = true;
disable_scroll();
classie.remove( container, 'collapse' );
}
// simulating the end of the transition:
setTimeout( function() {
isRevealed = !isRevealed;
isAnimating = false;
if( reveal ) {
noscroll = false;
enable_scroll();
}
}, 1200 );
}
var bodyWidth = document.body.clientWidth;
if (bodyWidth >= 800) {
// refreshing the page...
var pageScroll = scrollY();
noscroll = pageScroll === 0;
disable_scroll();
if( pageScroll ) {
isRevealed = true;
classie.add( container, 'notrans' );
classie.add( container, 'collapse' );
}
window.addEventListener( 'scroll', scrollPage );
trigger.addEventListener( 'click', function() { toggle( 'reveal' ); } );
}
})();
</script>
<script>
//(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
//(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
//m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
//})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
//ga('create', 'UA-59293417-1', 'auto');
//ga('send', 'pageview');
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手