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>
        .........完整代码请登录后点击上方下载按钮下载查看