CSS3制作苹果风格键盘特效

效果预览：

html标签：

复制代码代码如下:

CSS3 KeyBoard

• Q
• W
• E
• R
• T
• Y
• U
• I
• O
• P
• ?
• A
• S
• D
• F
• G
• H
• J
• K
• L
• return
• ?
• Z
• X
• C
• V
• B
• N
• M
• !,
• ?.
• ?
• .?123
• .?123
• ?

CSS代码：

复制代码代码如下:

@font-face {

font-family: 'icomoon';

src:url('http://upimage-img.stor.sinaapp.com/icomoon.eot');

src:url('http://upimage-img.stor.sinaapp.com/icomoon.eot?#iefix') format('embedded-opentype'),

url('http://upimage-img.stor.sinaapp.com/icomoon.woff') format('woff'),

url('http://upimage-img.stor.sinaapp.com/icomoon.ttf') format('truetype'),

url('http://upimage-img.stor.sinaapp.com/icomoon.svg#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background-color: #000;

}

ul, li {

list-style: none;

margin: 0;

padding: 0;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

ul {

width: 704px;

background: linear-gradient(60deg, rgba(158,180,185,1), rgba(222,157,193,1) 50%, rgba(169,156,173,1) 100%);

padding-left: 8px;

border-radius: 5px;

padding-top: 10px;

}

ul::after {

content: "";

display: table;

clear: both;

}

li {

font-family: "Vrinda";

width: 54px;

height: 50px;

line-height: 50px;

background-color: rgba(255,255,255,.9);

border-radius: 5px;

float: left;

text-align: center;

font-size: 24px;

vertical-align: text-top;

margin-right: 10px;

margin-bottom: 10px;

box-shadow: 0 1px 0 rgba(0,0,0,.5);

cursor: pointer;

position: relative;

}

li:active {

box-shadow: inset 0 1px 0 rgba(0,0,0,.5);

top:1px;

}

.icon {

font-family: "icomoon";

}

li:nth-child(11), li:nth-child(21), li:nth-child(22),

li:nth-child(32), li:nth-child(33), li:nth-child(35), li:nth-child(36) {

background: rgba(188,188,188,.5);

font-size: 20px;

}

li:nth-child(12) {

margin-left: 20px;

}

li:nth-child(21) {

width: 98px;

}

li:nth-child(n+22) {

width: 52px;

}

li:nth-child(32) {

width: 74px;

}

li:nth-child(33) {

width: 176px;

}

li:nth-child(34) {

width: 362px;

}

li:nth-child(35) {

width: 74px;

}

li:nth-child(31), li:nth-child(30) {

box-sizing: border-box;

padding-top: 14px;

}

li:nth-child(31) span, li:nth-child(30) span {

display: block;

line-height: 0.5;

}相关阅读:

smarty高级特性之对象的使用方法

浅谈C#中的常量、类型推断和作用域

理解java中的深复制和浅复制

PHP开发框架Laravel数据库操作方法总结

怎么查看电脑是否可以免费升级win10？

WP8.1无法升级Win10 Mobile预览版10512怎么办？

Node.js开发指南中的简单实例(mysql版)

编写C语言程序进行进制转换的问题实例

jquery Deferred 快速解决异步回调的问题

win7关机老是更新或者提示更新页面该怎么办？

基于WebUploader的文件上传js插件

PHP网页游戏学习之Xnova(ogame)源码解读(五)

Java集合之整体结构

最小生成树算法之Prim算法