苹果手机键盘html代码大全,CSS
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('.eot');
src:url('.eot?#iefix') format('embedded-opentype'),
url('.woff') format('woff'),
url('.ttf') format('truetype'),
url('.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算法