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;
}
DEMO下载：
------------------------------------------分割线------------------------------------------
具体下载目录在 /2015年资料/2月/4日/CSS3制作苹果风格键盘/
------------------------------------------分割线------------------------------------------