<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>html5键盘打字高亮动画特效 - 网页模板</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="key-wrapper">
<h2><span>点击我</span> 让焦点到本页面后，键盘输入查看效果</h2>
<ul>
<li class="drum" data-key="1" data-code="49">1</li>
<li class="drum" data-key="2" data-code="50">2</li>
<li class="drum" data-key="3" data-code="51">3</li>
<li class="drum" data-key="4" data-code="52">4</li>
<li class="synth" data-key="5" data-code="53">a♩</li>
<li class="synth" data-key="6" data-code="54">b♩</li>
<li class="synth" data-key="7" data-code="55">c♩</li>
<li class="synth" data-key="8" data-code="56">d♩</li>
<li class="synth" data-key="9" data-code="57">e♩</li>
<li class="synth" data-key="0" data-code="48">f♩</li>
<li class="synth" data-key="-" data-code="173">g♩</li>
</ul>
<ul>
<li class="drum" data-key="q" data-code="81">q</li>
<li class="drum" data-key="w" data-code="87">w</li>
<li class="drum" data-key="e" data-code="69">e</li>
<li class="drum" data-key="r" data-code="82">r</li>
<li class="" data-key="t" data-code="84">t</li>
<li class="bass" data-key="y" data-code="89">y</li>
<li class="bass" data-key="u" data-code="85">u</li>
<li class="pad" data-key="i" data-code="73">i</li>
<li class="pad" data-key="o" data-code="79">o</li>
<li class="pad" data-key="p" data-code="80">p</li>
</ul>
<ul>
<li class="drum" data-key="a" data-code="65">a</li>
<li class="drum" data-key="s" data-code="83">s</li>
<li class="drum" data-key="d" data-code="68">d</li>
<li class="drum" data-key="f" data-code="70">f</li>
<li class="" data-key="g" data-code="71">g</li>
<li class="bass" data-key="h" data-code="72">h</li>
<li class="bass" data-key="j" data-code="74">j</li>
<li class="loop" data-key="k" data-code="75">k</li>
<li class="loop" data-key="l" data-code="76">l</li>
</ul>
<ul>
<li class="drum" data-key="z" data-code="90">z</li>
<li class="drum" data-key="x" data-code="88">x</li>
<li class="drum" data-key="c" data-code="67">c</li>
<li class="drum" data-key="v" data-code="86">v</li>
<li class="" data-key="b" data-code="66">b</li>
<li class="" data-key="n" data-code="78">n</li>
<li class="loop" data-key="m" data-code="77">m</li>
<li class="loop" data-key="," data-code="188">,</li>
</ul>
<ul>
<li class="effect" data-key="SPACE" data-code="32">SPACE</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
html5键盘打字高亮动画特效.zip
版权申诉
194 浏览量
2022-11-18
22:13:48
上传
评论
收藏 85KB ZIP 举报
html5键盘打字高亮动画特效.zip （5个子文件） 
html5键盘打字高亮动画特效 
html5键盘打字高亮动画特效.jpg 61KB jiaoben4775 css 
style.css 2KB
index.html 3KB js jquery.min.js 91KB index.js 2KB资源评论
