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

代码语言：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-linear-gradient(left,#bbc3d2,#cdd3de,#bbc3d2);
	background:-moz-linear-gradient(left,#bbc3d2,#cdd3de,#bbc3d2);
	background:-ms-linear-gradient(left,#bbc3d2,#cdd3de,#bbc3d2);
	background:-o-linear-gradient(left,#bbc3d2,#cdd3de,#bbc3d2);
	background:linear-gradient(to right,#bbc3d2,#cdd3de,#bbc3d2);
	box-shadow:0 0 10px rgba(0,0,0,0.2);
	border-radius:4px;
	position:relative
}
.top {
	padding:3px 5px 0 0;
	font-size:12px;
	font-style:italic;
	text-align:right;
	line-height:1;
	display:block
}
.bottom {
	width:inherit;
	line-height:20px;
	display:block
}
.side {
	font-size:10px;
	line-height:1;
	display:block;
	position:absolute;
	left:4px;
	bottom:-10px;
	-webkit-transform:rotateX(50deg);
	-moz-transform:rotateX(50deg);
	-ms-transform:rotateX(50deg);
	-o-transform:rotateX(50deg);
	transform:rotateX(50deg)
}
.f_key .side {
	left:-3px
}
.k13 .side {
	right:7px;
	text-align:right
}
.k27,.k18.left {
	width:38px;
	border-right-width:9px
}
.k192,.fn,.k18.right {
	width:38px;
	border-left-width:9px
}
.k192 .keycap {
	width:30px
}
.k9 {
	width:66px;
	border-right-width:10px
}
.k8 {
	width:66px;
	border-left-width:10px
}
.k17 {
	width:87px;
	border-right-width:10px
}
.k13 {
	width:103px;
	border-left-width:10px
}
.k16.left {
	width:113px;
	border-right-width:10px
}
.k16.right {
	width:77px;
	border-left-width:10px
}
.k91,.k93 {
	width:72px
}
.k91 .top,.k93 .top {
	font-size:13px
}
.k91 .bottom,.k93 .bottom {
	font-size:20px
}
.k91.left {
	border-right-width:10px
}
.k93.right {
	border-left-width:10px
}
.k32 {
	width:328px;
	border-width:3px 8px 10px
}
.k32 .keycap {
	width:321px
}
.k32.pressed {
	-webkit-transform:scale(0.98,0.95);
	-moz-transform:scale(0.98,0.95);
	-ms-transform:scale(0.98,0.95);
	-o-transform:scale(0.98,0.95);
	transform:scale(0.98,0.95)
}

</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="keyboard">
        <div id="main">
            <div class="k27 f_key">
                <div class="keycap">Esc<span class="side">Power</span></div>
            </div>
            <div class="k49 key">
                <div class="keycap">!<br/>1<span class="side">F1</span></div>
            </div>
            <div class="k50 key">
                <div class="keycap">@<br/>2<span class="side">F2</span></div>
            </div>
            <div class="k51 key">
                <div class="keycap">#<br/>3<span class="side">F3</span></div>
            </div>
            <div class="k52 key">
                <div class="keycap">$<br/>4<span class="side">F4</span></div>
            </div>
            <div class="k53 key">
                <div class="keycap">%<br/>5<span class="side">F5</span></div>
            </div>
            <div class="k54 key">
                <div class="keycap">^<br/>6<span class="side">F6</span></div>
            </div>
            <div class="k55 key">
                <div class="keycap">&<br/>7<span class="side">F7</span></div>
            </div>
            <div class="k56 key">
                <div class="keycap">*<br/>8<span class="side">F8</span></div>
            </div>
            <div class="k57 key">
                <div class="keycap">(<br/>9<span class="side">F9</span></div>
            </div>
            <div class="k48 key">
                <div class="keycap">)<br/>0<span class="side">F10</span></div>
            </div>
            <div class="k189 key">
                <div class="keycap">_<br/>-<span class="side">F11</span></div>
            </div>
            <div class="k187 key">
                <div class="keycap">+<br/>=<span class="side">F12</span></div>
            </div>
            <div class="k220 key">
                <div class="keycap">|<br/>\<span class="side">Ins</span></div>
            </div>
            <div class="k192 key">
                <div class="keycap">~<br/>`<span class="side">Del</span></div>
            </div>
            <div class="k9 f_key">
                <div class="keycap">Tab<span class="side">Caps</span></div>
            </div>
            <div class="k81 key">
                <div class="keycap">Q</div>
            </div>
            <div class="k87 key">
                <div class="keycap">W</div>
            </div>
            <div class="k69 key">
                <div cl.........完整代码请登录后点击上方下载按钮下载查看