css+js模拟键盘效果-html代码-BFW代码库

css+js模拟键盘效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Interactive 60% Keyboard</title>
    <link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        body {
            display: flex;
            flex-direction: column;
            width: 100vw;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background-color: #111;
            background-image: linear-gradient(45deg, rgba(34, 34, 34, 0.667), rgba(34, 34, 34, 0.334)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/49914/grit-fs8.png);
            color: #999;
            font-family: system-ui,sans-serif;
        }

        em {
            margin-top: 1rem;
        }

        .keyboard {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 0;
            border-radius: 4px;
            border: 13px solid #777;
            border-top-color: #666;
            border-bottom-color: #888;
            outline: 3px solid rgba(0, 0, 0, 0.2);
            outline-offset: -1px;
            box-shadow: inset 0 1rem 1rem rgba(0, 0, 0, 0.5), 0 2rem 3rem -0.5rem rgba(0, 0, 0, 0.55);
            background-image: radial-gradient(#111, #222);
            padding: 0.25rem;
        }

        .row {
            height: 40px;
            display: flex;
            justify-content: space-between;
            width: 617.2px;
            padding-top: 1px;
            margin-bottom: 2px;
        }

        kbd {
            border-radius: 3px;
            box-sizing: border-box;
            color: rgba(0, 0, 0, 0.75);
            display: inline-block;
            font-family: system-ui,sans-serif;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.125;
            padding: 0.33em 0.66em;
            position: relative;
            text-align: center;
            vertical-align: middle;
            width: 40px;
            height: 40px;
            border: 3px solid transparent;
            border-top: 2px solid transparent;
            border-bottom: 6px solid transparent;
     .........完整代码请登录后点击上方下载按钮下载查看