纯CSS3打造逼真的苹果(Apple)电脑键盘

所属分类:输入-丰富的输入

 25622  277  查看评论 (8)
分享到微信朋友圈
X
纯CSS3打造逼真的苹果(Apple)电脑键盘 ie兼容9

简要教程

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


相关插件-丰富的输入

移动端全屏画板

手机全屏画板,支持多种颜色,绘制完可下载为图片,适合小游戏开发。(例如:画出印象中的你)
  丰富的输入
 27925  284

jquery仿牛客网的在线测评考试

实现在线模拟测评,仿照的是牛客网的测评页面
  丰富的输入
 31003  351

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 35089  360

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 9242  152

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    bitcocoon 0
    2019/3/5 10:00:05
    不能和页面交互,你这是在逗我玩吗? 回复
    DFFZMXJ 0
    2018/7/3 23:25:04
    然而我没有苹果电脑,有些按钮按不下去。 回复
    123560179 0
    2016/1/21 16:01:14

    太炫酷了,什么时候才能成为这样的大神呀!!!

    回复
    湾仔奥特曼 0
    2015/12/31 17:12:15
    请问有什么卵用?
        zding920
        2016/1/4 14:01:39

        哈哈哈

        A.I.Channel0
        2017/9/21 10:13:40
        6,笑出声2333
    回复
    Solbi。 ╯♥℡ 0
    2015/12/31 14:12:52
    说破。 0
    2015/12/30 17:12:58
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复