当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div id="keyboard">
 <ul>
 <li>
 <a href="#" class="key c27 fn">esc</a>
 </li>
 ......
 </ul>
 <ul id="numbers">
 <li><a href="#" class="key c192">~`</a></li>
 .....
 </ul>
 <ul id="qwerty">
 <li><a href="#" class="key c9" id="tab">tab</a></li>
 ......
 </ul>
 <ul id="asdfg">
 <li>
 <a href="#" class="key c20 alt" id="caps">
 caps lock
 </a>
 </li>
 ......
 </ul>
 <ul id="zxcvb">
 <li>
 <a href="#" class="key c16 shiftleft">Shift</a>
 </li>
 ......
 </ul>
 <ul id="bottomrow">
 <li><a href="#" class="key" id="fn">fn</a></li>
 ......
 </ul>
</div> 
``` 
##### CSS样式
键盘和按键的CSS样式主要采用圆角和渐变和阴影来实现。（下面的样式中省略了浏览器厂商的前缀代码）

```html
#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);
}      
```         
按键被按下或激活时的样式如下：

```html
.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代码来实现真实键盘和虚拟键盘的互动。当用户按下自己键盘的键时，虚拟键盘上的相应按键也会被按下。

```html
$(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');
});      
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果