js css3交互式鍵盤動(dòng)畫

使用方法：

1、head引入css文件

<link rel="stylesheet" href="css/style.css"/>

2、head引入js文件

<script src="js/script.js"></script>

3、body引入部分

  <div class="keyboard">
  <div class="row">
    <kbd tabindex=1 data-key="`" data-alt="~"></kbd>
    <kbd data-key="1" data-alt="!"></kbd>
    <kbd data-key="2" data-alt="@"></kbd>
    <kbd data-key="3" data-alt="#"></kbd>
    <kbd data-key="4" data-alt="$"></kbd>
    <kbd data-key="5" data-alt="%"></kbd>
    <kbd data-key="6" data-alt="^"></kbd>
    <kbd data-key="7" data-alt="&"></kbd>
    <kbd data-key="8" data-alt="*"></kbd>
    <kbd data-key="9" data-alt="("></kbd>
    <kbd data-key="0" data-alt=")"></kbd>
    <kbd data-key="-" data-alt="_"></kbd>
    <kbd data-key="=" data-alt="+"></kbd>
    <kbd data-key="backspace"></kbd>
  </div>
  <div class="row">
    <kbd data-key="tab"></kbd>
    <kbd data-key="q"></kbd>
    <kbd data-key="w"></kbd>
    <kbd data-key="e"></kbd>
    <kbd data-key="r"></kbd>
    <kbd data-key="t"></kbd>
    <kbd data-key="y"></kbd>
    <kbd data-key="u"></kbd>
    <kbd data-key="i"></kbd>
    <kbd data-key="o"></kbd>
    <kbd data-key="p"></kbd>
    <kbd data-key="[" data-alt="{"></kbd>
    <kbd data-key="]" data-alt="}"></kbd>
    <kbd data-key="\" data-alt="|" id='backslash'></kbd>
  </div>
  <div class="row">
    <kbd data-key="caps"></kbd>
    <kbd data-key="a"></kbd>
    <kbd data-key="s"></kbd>
    <kbd data-key="d"></kbd>
    <kbd data-key="f"></kbd>
    <kbd data-key="g"></kbd>
    <kbd data-key="h"></kbd>
    <kbd data-key="j"></kbd>
    <kbd data-key="k"></kbd>
    <kbd data-key="l"></kbd>
    <kbd data-key=";" data-alt=":"></kbd>
    <kbd data-key="'" data-alt='"' id='quote'></kbd>
    <kbd data-key="enter"></kbd>
  </div>
  <div class="row">
    <kbd data-key="lshift"></kbd>
    <kbd data-key="z"></kbd>
    <kbd data-key="x"></kbd>
    <kbd data-key="c"></kbd>
    <kbd data-key="v"></kbd>
    <kbd data-key="b"></kbd>
    <kbd data-key="n"></kbd>
    <kbd data-key="m"></kbd>
    <kbd data-key="," data-alt="<"></kbd>
    <kbd data-key="." data-alt=">"></kbd>
    <kbd data-key="/" data-alt="?"></kbd>
    <kbd data-key="rshift"></kbd>
  </div>
  <div class="row">
    <kbd data-key="lctrl"></kbd>
    <kbd data-key="lwin"></kbd>
    <kbd data-key="lalt"></kbd>
    <kbd data-key="space"></kbd>
    <kbd data-key="ralt"></kbd>
    <kbd data-key="rwin"></kbd>
    <kbd data-key="rctx"></kbd>
    <kbd data-key="rctrl"></kbd>
  </div>  
</div>