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

 查看演示  website  立即下载

简要教程

这是一款使用纯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');
});

PREVIOUS:
NEXT:
Tabs样式单页多图jQuery轮播图插件
jQuery自适应窗口大小导航菜单