纯CSS构建的麦博品牌电子琴

microlab art made by pure css

css, keyboard

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1086
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    font-size: 10px;
    background-color: #a6cdff;
}
.keyboard {
    overflow: hidden;
    font-family: "Oswald", sans-serif;
    font-size: 1.3vmin;
    width: 108.5em;
    height: 33.4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 2.2em;
    background-repeat: no-repeat;
}
@media (max-width: 599px) {
    .keyboard {
        font-size: 1vmin;
    }
}
.keyboard .left_side {
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 0em;
    width: 18.85em;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 1.5%;
    transform: translate(0, -50%);
    z-index: 2;
    background-repeat: no-repeat;
}
.keyboard .left_side .orange_box {
    width: 5em;
    height: 3.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 19.5%;
    left: 30%;
    border-radius: 0.4em;
    background: linear-gradient(-30deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)), #DD5811;
    background-repeat: no-repeat;
}
.keyboard .left_side .orange_box .oct_shift {
    box-shadow: none;
    top: 50%;
    background: linear-gradient(to bottom, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 0%/0.8% 3%, linear-gradient(to top, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 100%/0.8% 10%, #D1D6DA;
    background-repeat: no-repeat;
}
.keyboard .left_side .orange_box .oct_shift .shift {
    width: 95%;
    height: 95%;
    background: #232323;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    left: 45%;
}
.keyboard .left_side .orange_box .oct_shift p {
    color: #C6CCD0;
    left: 46%;
}
.keyboard .left_side .oct {
    box-shadow: 2px 0px 1px 2px rgba(210, 215, 220, 0.7), -3px -1px 4px rgba(185, 190, 195, 0.6), -4px -1px 3px rgba(185, 190, 195, 0.5), -4px 3px 6px rgba(185, 190, 195, 0.8);
    width: 4em;
    height: 2.4em;
    border: 0.14em solid #232323;
    border-radius: 0.3em;
    border-left: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    top: 24%;
}
.keyboard .left_side .oct p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 47%;
    letter-spacing: 0.07em;
    font-size: 0.8em;
}
.keyboard .left_side .oct_t {
    top: 20%;
    left: 65.6%;
    background: linear-gradient(to bottom, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 0%/0.8% 3%, linear-gradient(to top, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 100%/0.8% 10%, #D1D6DA;
    background-repeat: no-repeat;
}
.keyboard .left_side .oct_l {
    top: 34%;
    left: 29%;
    background: linear-gradient(to bottom, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 0%/0.8% 3%, linear-gradient(to top, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 100%/0.8% 10%, linear-gradient(to right, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.9) 51%) 78% 42%/15% 1%, #D1D6DA;
    background-repeat: no-repeat;
}
.keyboard .left_side .oct_r {
    top: 34%;
    left: 65.6%;
    background: linear-gradient(to bottom, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 73% 47%/0.8% 30%, linear-gradient(to bottom, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 0%/0.8% 3%, linear-gradient(to top, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.5)) 0% 100%/0.8% 10%, linear-gradient(to right, rgba(35, 35, 35, 0.9), rgba(35, 35, 35, 0.9) 51%) 78% 42%/15% 1%, #D1D6DA;
    background-repeat: no-repeat;
}
.keyboard .left_side .left_text {
    letter-spacing: 0.07em;
    font-size: 0.8em;
}
.keyboard .left_side .left_text .roboto {
    font-family: "Roboto", sans-serif;
}
.keyboard .left_side .left_text .text_top_main {
    left: 18%;
    top: 2.5%;
    position: absolute;
    font-size: 2.5em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.keyboard .left_side .left_text .text_top_main .lab {
    display: inline-block;
    position: absolute;
    left: 100%;
}
.keyboard .left_side .left_text .text_top_main .bold {
    font-weight: 700;
}
.keyboard .left_side .left_text .orange {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #E39A6F;
    color: #E48230;
}
.keyboard .left_side .left_text .header_sm {
    text-transform: uppercase;
    position: absolute;
    font-size: 0.9em;
    top: 8.5%;
    left: 18%;
    letter-spacing: 0.18em;
}
.keyboard .left_side .left_text .chord {
    left: 66%;
    top: 26.5%;
    z-index: 1;
}
.keyboard .left_side .left_text .previous {
    left: 30%;
    top: 41%;
}
.keyboard .left_side .left_text .next {
    left: 66%;
    top: 41%;
}
.keyboard .left_side .left_text .category {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    left: 30%;
    top: 96.8%;
}
.keyboard .left_side .left_text .preset {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    left: 65%;
    top: 96.8%;
}
.keyboard .left_side .left_text .reset {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 34%;
    left: 48%;
}
.keyboard .left_side .bottom_btns_l {
    border-radius: 0.2em;
    width: 4em;
    height: 14.5em;
    position: absolute;
    top: 70%;
    left: 29.6%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.5px 4px rgba(209, 216, 220, 0.6), -3px 0.5px 1px rgba(209, 216, 220, 0.8), 2px 1px 1px rgba(209, 216, 220, 0.6), 0px -1px 1px rgba(209, 216, 220, 0.6);
    background: linear-gradient(rgba(35, 35, 35, 0.8) 49%, rgba(35, 35, 35, 0.8) 51%) 51% 48%/40% 0.8%;
    background-repeat: no-repeat;
}
.keyboard .left_side .bottom_btns_r {
    border-radius: 0.2em;
    width: 4em;
    height: 14.5em;
    position: absolute;
    top: 70%;
    left: 65.8%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0.5px 2px rgba(209, 216, 220, 0.6), -3px 0.5px 2px rgba(209, 216, 220, 0.8), 2px 1px 2px rgba(209, 216, 220, 0.6), 0px -1px 2px rgba(209, 216, 220, 0.6);
    background: linear-gradient(rgba(35, 35, 35, 0.8) 49%, rgba(35, 35, 35, 0.8) 51%) 51% 48%/40% 0.8%;
    background-repeat: no-repeat;
}
.keyboard .right_side {
    border-radius: 1.7em;
    width: 30em;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    left: 84.4%;
    top: 50%;
    background-repeat: no-repeat;
}
.keyboard .right_side .box {
    transform: rotate(-38deg);
    position: absolute;
    z-index: 10;
    width: 5em;
    top: -3.7%;
    height: 7em;
    left: 8%;
    border-radius: 2em;
    box-shadow: -1px 0px 1px rgba(0, 0, 0, 0.61);
    background: linear-gradient(to bottom, rgba(239, 133, 59, 0), #ef853b) 0% 23%/5em 76%, #E98232;
}
.keyboard .right_side .circle {
    position: absolute;
    z-index: 10;
    width: 4em;
    top: 0%;
    height: 1.5em;
    left: 3%;
    background: #ef853b;
    background-repeat: no-repeat;
}
.keyboard .right_side .circle:after {
    content: "";
    width: 24.6em;
    height: 5em;
    border-bottom-left-radius: 2em;
    top: 1em;
    position: absolute;
    left: 3em;
    background: #EF853B;
    box-shadow: 0 3px 2px -2px #232323;
}
.keyboard .right_logo {
    position: absolute;
    z-index: 4;
    left: 77%;
    top: 5.5%;
    font-size: 3em;
    letter-spacing: 0.13em;
    color: #E1791D;
    font-family: "Libre Franklin", sans-serif;
}
.keyboard .right_logo:after {
    content: "";
    width: 0.1em;
    height: 0.1em;
    right: -0.1em;
    top: 0em;
    background: #E1791D;
    position: absolute;
    border: 1px solid #E07A28;
    border-radius: 50%;
}
.keyboard .borders .border_main {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), inset 3px 0px 5px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    background: #EF853B;
    background-repeat: no-repeat;
}
.keyboard .borders .border_main .border_inner {
    border-radius: 1.6em;
    width: 95%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    left: 49%;
    background: #E5ECF0;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), inset 3px 0px 5px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.keyboard .keys_container {
    width: 83.5em;
    height: 26em;
    position: absolute;
    top: 61%;
    left: 56.5%;
    transform: translate(-50%, -50%);
    background: linear-gradient(to left, rgba(35, 35, 35, 0.15), rgba(255, 255, 255, 0)) 100% 100%/20% 9%, linear-gradient(to right, rgba(35, 35, 35, 0.1), rgba(255, 255, 255, 0)) 0% 100%/20% 9%, linear-gradient(22deg, #b96b26 49%, transparent 51%) 100% 100%/0.8em 3.5em, linear-gradient(to bottom, #010201, rgba(1, 2, 1, 0)) 99.3% 0%/0.3em 15%, linear-gradient(to left, #5E6367, rgba(1, 2, 1, 0)) 99.3% 0%/0.3em 85%, linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)) 100% 0%/0.8em 93%, linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent) 100% 0%/1em 93%, linear-gradient(to left, #010201, rgba(0, 0, 0, 0.2)) 0.4% 0%/0.5em 85%, linear-gradient(-22deg, #b96b26 49%, transparent 51%) 0% 100%/0.8em 3.5em, linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8)) 0% 0%/0.2em 93.5%, linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6)) 0% 0%/0.8em 85%, linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent) 0% 100%/1em 100%, linear-gradient(to right, #e77e3a, #E77E3A) 50% 100%/100% 1em, linear-gradient(to right, #d2dfe7, #D2DFE7) 50% 100%/100% 9%;
    background-repeat: no-repeat;
}
.keyboard .keys_container .keys {
    width: 82em;
    height: 23.4em;
    position: absolute;
    left: 50%;
    box-shadow: 0 3px 2px -2px gray;
    transform: translate(-50%, 0%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0% 0%/100% 4%, linear-gradient(to right, rgba(111, 112, 117, 0.7), #6f7075, #979fa2) 0% 100%/86.5% 0.4%, linear-gradient(to right, rgba(111, 112, 117, 0.7), #6f7075, #979fa2) 92.5% 100%/5.3em 0.4%, linear-gradient(to right, rgba(111, 112, 117, 0.7), #6f7075, #232323) 100% 100%/5.2em 0.4%, linear-gradient(-30deg, rgba(147, 150, 147, 0.2), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0.2)) 89.2% 55%/0.5em 1%, linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(70, 71, 73, 0.3), rgba(62, 62, 61, 0.2)) 86.4% 0%/0.13em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 86.4% 0%/0.23em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 89.2% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 89.2% 60.4%/2.6em 5%, linear-gradient(#939693, rgba(147, 150, 147, 0.5), rgba(62, 62, 61, 0.5)) 86.9% 0%/0.1em 59%, linear-gradient(to right, #242424, #242424, #242424) 89.2% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 89.2% 0%/2.8em 62%, linear-gradient(to right, #000, #000, #212526) 89.2% 0%/2.8em 60%, linear-gradient(-30deg, rgba(147, 150, 147, 0.2), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0.2)) 81.3% 55%/0.35em 1%, linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(70, 71, 73, 0.3), rgba(62, 62, 61, 0.2)) 79.1% 0%/0.13em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 79.1% 0%/0.23em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 81% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 81% 60.4%/2.6em 5%, linear-gradient(#939693, rgba(147, 150, 147, 0.5), rgba(62, 62, 61, 0.5)) 78.9% 0%/0.1em 59%, linear-gradient(to right, #242424, #242424, #242424) 81% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 81% 0%/2.8em 62%, linear-gradient(to right, #000, #000, #212526) 81% 0%/2.8em 60%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.6), rgba(62, 62, 61, 0.5)) 73.3% 55%/0.15em 1%, linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(70, 71, 73, 0.6), rgba(62, 62, 61, 0.5)) 71.1% 0%/0.23em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 74% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 73% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 73% 60.4%/2.6em 5%, linear-gradient(#939693, rgba(147, 150, 147, 0.5), rgba(62, 62, 61, 0.5)) 71.3% 0%/0.1em 59%, linear-gradient(to right, #242424, #242424, #242424) 73% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 73% 0%/2.8em 62%, linear-gradient(to right, #000, #000, #212526) 73% 0%/2.8em 60%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.6), rgba(62, 62, 61, 0.5)) 62.1% 55%/0.1em 1%, linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(70, 71, 73, 0.6), rgba(62, 62, 61, 0.5)) 59.6% 0%/0.23em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 62.5% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 61.1% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 61.1% 60.4%/2.6em 5%, linear-gradient(#939693, rgba(147, 150, 147, 0.5), rgba(62, 62, 61, 0.5)) 62.2% 0%/0.1em 59%, linear-gradient(to right, #232323, #232323, #232323) 61.1% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 61.1% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 61.1% 0%/2.8em 60%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.6), rgba(62, 62, 61, 0.5)) 53.8% 55%/0.1em 1%, linear-gradient(to right, rgba(70, 71, 73, 0.9), #464749, rgba(62, 62, 61, 0.5)) 54.2% 0%/0.23em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 51.3% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 52.8% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 52.8% 60.4%/2.6em 5%, linear-gradient(#939693, rgba(147, 150, 147, 0.5), rgba(62, 62, 61, 0.5)) 51.7% 0%/0.1em 59%, linear-gradient(to right, #232323, #232323, #232323) 52.8% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 52.8% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 52.8% 0%/2.8em 60%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.6), rgba(62, 62, 61, 0.5)) 41.8% 55%/0.1em 1%, linear-gradient(to right, rgba(70, 71, 73, 0.9), #464749, rgba(62, 62, 61, 0.5)) 39.5% 0%/0.23em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.2), #464749, rgba(70, 71, 73, 0.3)) 42.2% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 40.5% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 40.5% 60.4%/2.6em 5%, linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7), rgba(62, 62, 61, 0.1)) 39.7% 0%/0.1em 59%, linear-gradient(to right, #242529, #242529, #242529) 40.5% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 40.5% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 40.5% 0%/2.8em 60%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.6), rgba(62, 62, 61, 0.5)) 34.2% 55%/0.1em 1%, linear-gradient(to right, rgba(70, 71, 73, 0.9), #464749, rgba(62, 62, 61, 0.5)) 34.7% 0%/0.23em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 31.7% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 32.7% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 32.7% 60.4%/2.6em 5%, linear-gradient(rgba(147, 150, 147, 0.7), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0)) 32% 0%/0.1em 54%, linear-gradient(to right, #242529, #242529, #242529) 32.7% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 32.7% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 32.7% 0%/2.8em 60%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.6), rgba(62, 62, 61, 0.5)) 26.5% 55%/0.1em 1%, linear-gradient(to right, rgba(70, 71, 73, 0.9), #464749, rgba(62, 62, 61, 0.5)) 27% 0%/0.23em 59%, linear-gradient(to right, rgba(35, 35, 35, 0.9), #464749, rgba(70, 71, 73, 0.5)) 23.6% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 24.5% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 24.5% 60.4%/2.6em 5%, linear-gradient(rgba(147, 150, 147, 0.6), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0)) 24.1% 0%/0.1em 48%, linear-gradient(to right, #242529, #242529, #242529) 24.5% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 24.5% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 24.5% 0%/2.8em 60%, linear-gradient(#86859a, rgba(62, 62, 61, 0)) 12.5% 2%/2.6em 3%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0.4)) 14.7% 55%/0.1em 1%, linear-gradient(to right, rgba(70, 71, 73, 0.9), #464749, rgba(62, 62, 61, 0.5)) 15.1% 0%/0.18em 59%, linear-gradient(to right, rgba(46, 46, 50, 0.7), #343438, rgba(46, 46, 50, 0.7)) 12.1% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 12.5% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 12.5% 60.4%/2.6em 5%, linear-gradient(rgba(147, 150, 147, 0.6), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0)) 12.5% 0%/0.1em 43%, linear-gradient(to right, #242529, #242529, #242529) 12.5% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 12.5% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 12.5% 0%/2.8em 60%, linear-gradient(transparent 15%, rgba(255, 255, 255, 0.7), rgba(134, 133, 154, 0.6), transparent) 4.1% 0%/2.7em 6%, linear-gradient(rgba(147, 150, 147, 0.4), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0.4)) 6.6% 55%/0.1em 1%, linear-gradient(to right, rgba(70, 71, 73, 0.9), #464749, rgba(62, 62, 61, 0.5)) 7.2% 0%/0.18em 59%, linear-gradient(to right, rgba(46, 46, 50, 0.7), #343438, rgba(46, 46, 50, 0.7)) 3.9% 0%/0.33em 59%, radial-gradient(110% 100% at 50% 100%, rgba(0, 0, 0, 0) 50%, #232323 51%) 4.1% 57%/2.6em 2.6em, linear-gradient(to right, rgba(70, 71, 73, 0.5), rgba(70, 71, 73, 0.8), rgba(70, 71, 73, 0.5)) 4.1% 60.4%/2.6em 5%, linear-gradient(rgba(147, 150, 147, 0.6), rgba(255, 255, 255, 0.5), rgba(62, 62, 61, 0)) 4.1% 0%/0.1em 43%, linear-gradient(to right, #242529, #242529, #242529) 4.1% 0%/2.4em 59%, linear-gradient(to right, #17191B, #000, #212526) 4.1% 0%/2.8em 62%, linear-gradient(to right, #17191B, #000, #212526) 4.1% 0%/2.8em 60%, linear-gradient(to right, #6A7074, #6A7074, #6A7074) 93.5% 0%/100% 0.15em, linear-gradient(to right, transparent, #000, transparent) 93.5% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 86.7% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 80% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 73.3% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 66.6% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 60% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 53.2% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 46.4% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 39.8% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 32.9% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 26.2% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 19.6% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 13% 100%/0.3em 100%, linear-gradient(to right, transparent, #000, transparent) 6.4% 100%/0.3em 100%, #D6DEE1;
    background-repeat: no-repeat;
}
.keyboard .text .text_top_center {
    z-index: 1;
    position: absolute;
    top: 14.5%;
    left: 23.6%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
    letter-spacing: 0.15em;
}
.keyboard .text .numbers_center {
    width: 60%;
    height: 2em;
    position: absolute;
    z-index: 2;
    left: 19%;
    top: 15.5%;
    background: linear-gradient(to right, #232323, #232323) 0% 55%/1em 0.1em, linear-gradient(to right, #232323, #232323) 0% 15%/0.1em 40%;
    background-repeat: no-repeat;
}
.keyboard .text .numbers_center .numbers_container {
    position: absolute;
    width: 76%;
    height: 90%;
    font-size: 0.85em;
    left: 2.1%;
    bottom: -1%;
    display: flex;
    justify-content: space-between;
}
.keyboard .text .numbers_center .numbers_container div {
    padding-top: 0.2em;
}
.keyboard .final_shade {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: inherit;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 75.5% 0%/5.2% 2%;
    background-repeat: no-repeat;
    z-index: 10;
}

HTML

<div class="keyboard">
    <div class="right_logo">
        ARTURIA
    </div>
    <div class="text">

<div class="text_top_center">
            KEYBOARD MIDI CHANNEL
        </div>
        <div class="numbers_center">

<div class="numbers_container">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
                <div>16</div>
            </div>
        </div>
    </div>
    <div class="left_side">
        <div class="left_text">
            <div class="roboto text_top_main">
                <span class="bold roboto">Micro</span>
                <div class="lab">Lab</div>
            </div>
            <div class="header_sm">
                Smart Keyboard Controller
            </div>
            <div class="chord orange">Chord</div>
            <div class="category orange">
                Category
            </div>
            <div class="preset orange">Preset</div>
            <div class="reset">Reset</div>
            <div class="previous orange">Previous</div>
            <div class="next orange">Next</div>
        </div>
        <div class="orange_box">
            <div class="oct oct_shift">
                <div class="shift">
                    <p>Shift</p>
                </div>
            </div>
        </div>
        <div class="oct oct_l">
            <p>Oct -</p>
        </div>
        <div class="oct oct_r">
            <p>Oct -</p>
        </div>
        <div class="oct oct_t">
            <p>Hold</p>
        </div>
        <div class="bottom_btns_l">
        </div>
        <div class="bottom_btns_r">
        </div>
    </div>
    <div class="right_side">
        <div class="box"></div>
        <div class="circle"></div>
    </div>
    <div class="borders">
        <div class="border_main">
            <div class="border_inner"></div>
        </div>
        <div class="keys_container">
            <div class="keys"></div>
        </div>

</div>
    <div class="final_shade"></div>
</div>

microlab art made by pure css

css, keyboard

编辑器支持Emmet

快捷键

microlab art made by pure css

css, keyboard

纯CSS构建的银白色Mac电脑全键盘

纯CSS构建的等离子体全屏背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：