纯CSS3打造逼真的苹果（Apple）电脑键盘

所属分类： JQ特效输入丰富的输入

查看演示立即下载

插件描述：这是一款使用纯CSS3制作的效果非常逼真的苹果（Apple）电脑键盘效果。该苹果电脑键盘可以通过按真实键盘上的相应键来触发虚拟键盘上的键，按键被按下时有逼真的动画效果。

简要教程

这是一款使用纯CSS3制作的效果非常逼真的苹果(Apple)电脑键盘效果。该苹果电脑键盘可以通过按真实键盘上的相应键来触发虚拟键盘上的键，按键被按下时有逼真的动画效果。

使用方法

HTML结构

该苹果键盘效果的HTML结构中，将键盘的每一部分用无序列表来包裹，各组列表分为功能键，数字键，和字母按钮等。

<div id="keyboard">
  <ul>
      <li>
        <a href="#" class="key c27 fn"><span id="esc">esc</span></a>
      </li>
      ......
  </ul>
  <ul id="numbers">
    <li><a href="#" class="key c192"><b>~</b><span>`</span></a></li>
    .....
  </ul>
  <ul id="qwerty">
    <li><a href="#" class="key c9" id="tab"><span>tab</span></a></li>
    ......
  </ul>
  <ul id="asdfg">
    <li>
      <a href="#" class="key c20 alt" id="caps">
        <b></b><span>caps lock</span>
      </a>
    </li>
    ......
  </ul>
  <ul id="zxcvb">
    <li>
      <a href="#" class="key c16 shiftleft"><span>Shift</span></a>
    </li>
    ......
  </ul>
  <ul id="bottomrow">
    <li><a href="#" class="key" id="fn"><span>fn</span></a></li>
    ......
  </ul>
</div>

CSS样式

键盘和按键的CSS样式主要采用圆角和渐变和阴影来实现。(下面的样式中省略了浏览器厂商的前缀代码)

#keyboard {
  z-index: 20;
  margin: 50px auto 20px;
  width: 800px;
  height: 315px;
  background: #bbb;
  background-image: -moz-linear-gradient(
    center bottom,
    rgb(212,216,219) 27%,
    rgb(213,217,220) 64%,
    rgb(230,233,235) 95%,
    rgb(191,191,191) 100%
  );
  border-top-left-radius: 7px 21px;
  border-top-right-radius: 7px 21px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 50px 0 0;
  box-shadow:  
    inset 0 0 8px #bbb,
    0 1px 0 #aaa,
    0 4px 0 #bbb,
    0 10px 30px #ddd;}
  
ul {list-style-type: none; width: 784px; margin: 0 auto;}
li {float: left;}
  
.key{
  display: block;
  color: #aaa;
  font: bold 9pt arial;
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 41px;
  margin: 5px;
  background: #eff0f2;
  border-radius: 4px;
  border-top: 1px solid #f5f5f5;
  box-shadow: 
    inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  text-shadow: 0px 1px 0px #f5f5f5;
  filter: dropshadow(color=#f5f5f5, offx=0, offy=1);
}

按键被按下或激活时的样式如下：

.key:active, .keydown {
  color: #888;
  background: #ebeced;
  margin: 7px 5px 3px;
  box-shadow: 
    inset 0 0 25px #ddd,
    0 0 3px #333;
  border-top: 1px solid #eee;
}

初始化插件

该特效中使用了一点jQuery代码来实现真实键盘和虚拟键盘的互动。当用户按下自己键盘的键时，虚拟键盘上的相应按键也会被按下。

$(window).keydown(function (e) {
    key = e.keyCode ? e.keyCode : e.which;
    $('.key.c' + key).addClass('keydown');
    console.log(key);
});
$(window).keyup(function (e) {
    key = e.keyCode ? e.keyCode : e.which;
    $('.key.c' + key).removeClass('keydown');
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery自适应窗口大小导航菜单
下一个特效： Tabs样式单页多图jQuery轮播图插件