纯CSS3逼真苹果Apple电脑键盘

PetitQ 其他代码 2019-2-28 1.57K 0 0

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

```
});
```

纯 CSS3 逼真苹果 Apple 电脑键盘

已有 393 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

纯CSS3逼真苹果Apple电脑键盘

HTML 结构

CSS 样式

初始化插件

纯 CSS3 逼真苹果 Apple 电脑键盘

相关文章

jQuery二维码生成插件

格林威治标准时间（GMT）jQuery模拟时钟插件

多格式功能移动端日期选择插件

发表回复取消回复

热销模板

其他代码

HTML 结构

CSS 样式

初始化插件

纯 CSS3 逼真苹果 Apple 电脑键盘

相关文章

发表回复 取消回复

热销模板

发表回复取消回复