原生js结合css3属性绘制网页虚拟键盘,鼠标点击或直接按下键盘按钮弹性效果。这是一款交互的电脑键盘动画特效。
使用方法:
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>