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

代码语言:html

所属分类:其他

代码描述:jquery实现一个虚拟动态反馈键盘效果代码

代码标签: 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