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