js css3交互式键盘动画

js css3交互式键盘动画

收藏
js css3交互式键盘动画
原生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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。
5. 如果素材损害你的权益请联系客服QQ:3264130392给予处理。

x
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了