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

原生js結(jié)合css3屬性繪制網(wǎng)頁(yè)虛擬鍵盤，鼠標(biāo)點(diǎn)擊或直接按下鍵盤按鈕彈性效果。這是一款交互的電腦鍵盤動(dòng)畫(huà)特效。

使用方法：

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>

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

67 5973 12