jquery实现一个虚拟动态反馈键盘效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现一个虚拟动态反馈键盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Average+Sans);
#update {
margin-top:60px;
text-align:center
}
body {
width:890px;
margin:0 auto;
padding:100px 30px 30px;
font-family:"Average Sans",sans-serif;
color:#555;
text-shadow:0 0 1px rgba(0,0,0,0.1);
background:#C7DBE5
}
#keyboard {
padding:30px 8px 13px;
background:#f5f3f1;
background:-webkit-linear-gradient(top,#e5e2e1,#f5f3f1,#e5e2e1);
background:-moz-linear-gradient(top,#e5e2e1,#f5f3f1,#e5e2e1);
background:-ms-linear-gradient(top,#e5e2e1,#f5f3f1,#e5e2e1);
background:-o-linear-gradient(top,#e5e2e1,#f5f3f1,#e5e2e1);
background:linear-gradient(to bottom,#e5e2e1,#f5f3f1,#e5e2e1);
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.2),inset 0 0 3px rgba(0,0,0,0.3);
-webkit-transform:rotateX(15deg);
-ms-transform:rotateX(15deg);
-o-transform:rotateX(15deg)
}
#main {
padding:2px;
background:#4d4d4d;
border-radius:4px;
overflow:hidden
}
#addition_wrap {
width:650px;
margin:-2px 0 0 85px;
padding:0 2px 2px;
background:#4d4d4d;
border-radius:0 0 4px 4px;
position:relative
}
#addition_wrap:before,#addition_wrap:after {
content:"";
width:5px;
height:5px;
background:#ebe8e7;
border-top:2px solid #4d4d4d;
position:absolute;
top:0
}
#addition_wrap:before {
left:-5px;
border-right:2px solid #4d4d4d;
border-radius:0 5px 0 0
}
#addition_wrap:after {
right:-5px;
border-left:2px solid #4d4d4d;
border-radius:5px 0 0 0
}
#addition {
overflow:hidden
}
.key,.f_key {
width:40px;
height:.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0