jquery实现一个虚拟动态反馈键盘效果代码-html代码-BFW代码库

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:45px;
	margin:2px;
	border-width:3px 7px 10px;
	border-style:solid;
	border-radius:4px;
	float:left
}
.key.pressed,.f_key.pressed {
	-webkit-transform:scale(0.95,0.95);
	-moz-transform:scale(0.95,0.95);
	-ms-transform:scale(0.95,0.95);
	-o-transform:scale(0.95,0.95);
	transform:scale(0.95,0.95)
}
.key {
	background:#d3cfcc;
	border-color:#ece8e4 #dedad6 #c9c4c4
}
.f_key {
	background:#a8aeb8;
	border-color:#c4c7cc #adb9cc #96a6bd
}
.key .keycap {
	width:33px;
	height:40px;
	padding:5px 0 0 7px;
	font-size:18px;
	line-height:1;
	background:#f5f3f1;
	background:-webkit-linear-gradient(left,#e5e2e1,#f5f3f1,#e5e2e1);
	background:-moz-linear-gradient(left,#e5e2e1,#f5f3f1,#e5e2e1);
	background:-ms-linear-gradient(left,#e5e2e1,#f5f3f1,#e5e2e1);
	background:-o-linear-gradient(left,#e5e2e1,#f5f3f1,#e5e2e1);
	background:linear-gradient(to right,#e5e2e1,#f5f3f1,#e5e2e1);
	box-shadow:0 0 10px rgba(0,0,0,0.15);
	border-radius:4px;
	position:relative
}
.f_key .keycap {
	width:inherit;
	height:inherit;
	font-size:15px;
	line-height:45px;
	text-indent:7px;
	background:#cdd3de;
	background:-webkit-li.........完整代码请登录后点击上方下载按钮下载查看