css布局实现一个音乐合成器效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个音乐合成器效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  


  
<style>
/*  
 Page: https://fossheim.io
 Patreon: https://patreon.com/fossheim
 Buy Me A Coffee: https://buymeacoffee.com/fossheim
 
 Inspired by the Muson toy synth.
*/


:root {
    --letter-1: #2E1F23;
    --letter-2: #1A1A24;

    --button-1: #171310;
    --button-2: #18171F;
    --button-3: #353541;
    --button-4: #302E33;

    --center-1: #0F1622;
    --center-2: #171D33;
    --center-3: #222632;
    --center-4: #313842;

    --center-5: #1C1F30;
    --center-6: #3D3A4D;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #CFD6F0;
    background-image: linear-gradient(45deg, #CFD6F0, #F0F2FE);
    min-height: 100vh;
}

.muson {
    display: block;

    position: absolute;
    top: 120px;
    top: calc(50vh - 300px);
    left: 0;
    right: 0;

    margin: 0 auto;

    width: 790px;
    height: 610px;

    border-radius: 6px;

    background-color: #FFD9D0;
    background-image: linear-gradient(
        135deg,
        #EFC4BB,
        #F6D0C7,
        #FDE0DA
    );

    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
        3.5px 0 2.5px -2.5px #AE857F inset,
        4.5px 0 2.5px -2.5px #D8B5AF inset,
        5.5px 0 2.5px -2.5px #DBBBB0 inset,
        6.5px 0 2.5px -2.5px #DFBDB1 inset,
        
        -3px 0 2px -2px #F9EAE5 inset,
        -3.5px 0 2px -2px #FFF0ED inset,
        -4.5px 0 2px -2px #FDDFD4 inset,
        -5.5px 0 2px -2px #FEE1DB inset,
        
        0 2px 2px -2px #EBCDCF inset,
        0 4px 2px -2px #EEC8C7 inset,
        0 5px 2px -2px #F4CFC7 inset,
        
        0 -2px 1.5px -1.5px #E8D4DD inset,
        0 -4.5px 1.5px -1.5px #F4CFC7 inset,
        0 -5px 1.5px -1.5px #FFFDFB inset,
        
        -30px -30px 10px rgba(114, 86, 98, 0.05),
        -25px -25px 10px rgba(114, 86, 98, 0.1),
        -20px -20px 10px rgba(114, 86, 98, 0.075),
        -10px -10px 10px rgba(114, 86, 98, 0.1),
        -5px -5px 10px rgba(114, 86, 98, 0.125),
        -50px -90px 30px rgba(114, 86, 98, 0.15),
        -45px -80px 30px rgba(114, 86, 98, 0.125),
        -40px -70px 30px rgba(114, 86, 98, 0.1),
        -35px -60px 30px rgba(114, 86, 98, 0.075),
        -45px -50px 30px rgba(114, 86, 98, 0.05),
        
        -2px 0 5px rgba(137, 124, 142, 0.5),
        0 0 10px rgba(137, 124, 142, 0.1),
        0 0 20px rgba(137, 124, 142, 0.05),
        0 0 50px rgba(255, 245, 250, 0.5);
}

.top-bar {
    display: block;
    width: 805px;
    height: 220px;
    margin-left: -8px;
    border-radius: 6px 6px 2px 2px;
    background-image: linear-gradient(#FAD2CA, #F9D1C7);

    box-shadow: 2px 0 1.5px -1.5px #7C5558 inset,
        3.5px 0 2.5px -2.5px #AE857F inset,
        4.5px 0 2.5px -2.5px #D8B5AF inset,
        5.5px 0 2.5px -2.5px #DBBBB0 inset,
        6.5px 0 2.5px -2.5px #DFBDB1 inset,
        
        -3px 0 2px -2px #F9EAE5 inset,
        -3.5px 0 2px -2px #FFF0ED inset,
        -4.5px 0 2px -2px #FDDFD4 inset,
        -5.5px 0 2px -2px #FEE1DB inset,
        
        0 2px 2px -2px #EBCDCF inset,
        0 4px 2px -2px #EEC8C7 inset,
        0 5px 2px -2px #F4CFC7 inset,
        
        0 -2px 1.5px -1.5px #F9D1C7 inset,
        0 -4.5px 1.5px -1.5px #F9D1C7 inset,
        0 -5px 1.5px -1.5px #FFEAE4 inset,
        
        
        2px 12px 1.5px -6px #F9D1C7,
        1px 11px 1.5px -6px #F9D1C7,
        1px 10px 1.5px -6px #F9D1C7,
        1px 9px 1.5px -5px #F9D1C7,
        1px 8px 1.5px -5px #F9D1C7,
        1px 7px 1.5px -5px #F9D1C7,
        1px 6px 1.5px -5px #F9D1C7,
        3px 5px 1.5px -2px #F9D1C7,
        2px 4px 1.5px -2px #F9D1C7,
        1px 3px 1.5px -2px #F9D1C7,
        
        3px 13px 1px -6px #F9D1C7,
        3px 12px 4px -6px rgba(126, 80, 67, 0.25),
        -2px 25px 30px -3px rgba(126, 80, 67, 0.025),
        -2px 35px 35px -3px rgba(126, 80, 67, 0.075);

    position: relative;
}

.muson-frame {
    display: block;
    width: 310px;
    height: 165px;
    background-color: transparent;
    
    position: absolute;
    top: 25px;
    right: 65px;

    border-radius: 1px;

    box-shadow: 1px -1px 1px #DEB3AC inset,
        -2px 0 1px -1px #FFDBD3 inset,
        0 -1.5px 1px #FFDFD3 inset,
        0 70.25px 1px -70px #B58475;
}

.muson-frame:before {
    content: "";
    display: block;
    width: 320px;
    height: 25px;
    border-radius: 0 0 2px 2px;

    background-color: transparent;

    position: absolute;

    top: -25px;
    left: -10px;

    box-shadow: -0.5px 1.25px 0.75px -0.25px #D4A89D,
        0.5px 0 0.75px -0.25px #F3C9BD,
        0 -1px 0.5px -0.5px rgba(243, 204, 197, 1),
        0 -1px 1px #F7CBC0 inset,
        0 0 3px 4px #FCD1CA inset;
}

.muson-frame:after {
    content: "";
    display: block;
    width: 45px;
    height: 39px;
    border-radius: 0.5px;

    background-image: radial-gradient(rgba(255, 222, 213, 0.25), rgba(255, 222, 213, 0) 60%),
        repeating-linear-gradient(#F8D2C5 0 24%, #FDD9C9 25% 49%, #F6D1BF 50% 74%, #FDD4C0 75% 100%);
    background-size: 100% 100%, 4px 4px;

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    opacity: 0.95;

    box-shadow: 0 -1.5px 1px -0.5px #DEB3AC inset,
        0 -2px 1px -0.5px #FFDFD3 inset,
        -1px 0 1px #FFDED5 inset,
        1px 0 1px -0.5px #FFDED5,
        1px 0 1px #FBD5CA inset,
        -1px 0 1px -0.5px #FBD5CA,
        0 1.75px 1px -1px #B58475;
}

.rainbow {
    display: block;
    width: 290px;
    height: 120px;

    position: absolute;
    top: 7px;
    left: 8px;

    background-color: #fff;
    background-image: linear-gradient(#1E202F 0 12%,
        #495AC2 12.5% 24.5%,
        #1250C7 25% 37%,
        #039CEC 37.5% 49.5%,
        #DFC63F 50% 62%,
        #FED13F 62.5% 74.5%,
        #FC672F 75% 87%,
        #FD3A48 87.5% 100%
    );
    
    border-radius: 1px;

    box-shadow: 0 -2px 2px -2px rgba(255, 220, 211, 1) inset,
        0px 0 1.25px 1px #FEDDD6 inset,
        0 0 1px 1.5px rgba(82, 58, 56, 0.5) inset,
        0 0 2.5px 3px rgba(82, 58, 56, 0.2) inset,
        0 0 4px 5px rgba(82, 58, 56, 0.1) inset,
        -1px 0 1px #DDDAE3,
        0 0 5px 3px #F6DACF;
}

.speaker-bar {
    display: block;
    width: 365px;
    height: 219px;

    background-color: transparent;
    
    border-radius: 6px 6px 2px 2px;
    position: absolute;
    top: 1px;
    left: 2px;

    box-shadow: 0 -10px 2px -2px #F9D1C7 inset,
        0 0 1px #F9D1C7,
        -10px 0 3px -3px #FFE0D3 inset,
        5px 0 3px -3px #FFE0D3,
        7px 0 2px -5px rgba(166, 122, 111, 0.15),
        21px 0 3px -20px rgba(95, 64, 56, 0.15),
        -9px -5px 5px rgba(254, 210, 201, 0.5) inset;

}

.speakers {
    display: block;
    width: 175px;
    height: 180px;

    border-radius: 100px;

    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 15px;

    background-image: linear-gradient(90deg, transparent, #E8C2B6 20% 80%, transparent),
        linear-gradient(transparent 0 12.5%, 
            #EECEC1 12.5% 25%,
            #67473C 37.5% 50%, 
            #4A251F 50% 62.5%, 
            transparent 82% 100%
        ), linear-gradient(
            #EEC4B4,
            #E8C6BC
        );
    background-size: 6px 100%, 9px 9px, 100% 100%;
    background-repeat: no-repeat, repeat, repeat;
    background-position: center center, top left, top left;

    box-shadow: 0 0 2px 0.5px #F9D1C7,
        -1.75px -1.75px 1.5px -1px #F9D1C7,
        -2px -2px 5px -2px #F9D1C7,

        -5px -25px 20px -5px rgba(83, 23, 0, 0.05) inset,
        -5px -15px 15px -5px rgba(83, 23, 0, 0.05) inset,
        -10px -35px 30px -10px rgba(83, 23, 0, 0.025) inset,

        5px 25px 20px -5px rgba(255, 243, 238, 0.1) inset,
        5px 15px 15px -5px rgba(255, 243, 238, 0.05) inset,
        10px 35px 30px -10px rgba(255, 243, 238, 0.025) inset,

        0 0 2px 0.5px #FEDCD3 inset,
        -2px -2px 5px -1px rgba(245, 203, 191, 0.5) inset,
        0 14px 1px 25.5px #F6D0C7 inset,
        0 14px 1px 26.5px #EFC1B2 inset,
        0 14px 1px 30px #F0C3B0 inset;
}

.key-container {
    display: grid;
    width: 435px;
    height: 100px;

    grid-template-columns: repeat(10, 1fr);
    column-gap: 3px;

    position: absolute;
    bottom: 35px;
    left: 177px;
    border-radius: 1px;
    background-color: #821510;

    box-shadow: -10px -10px 10px -5px rgba(58, 12, 2, 0.2),
    
        -2px 0 1px #BCA7A6 inset,
        1px 1px 1px 1px #E8D1C9,
        2px 2px 2px 1px #FFE3D5,
        3px 3px 4px 1px #FDE0D2,
        
        -1px -1px 1px 0 #8E675F;
}

.key-container > div {
    background-color: #fff;
    background-image: linear-gradient(90deg,
        #E7EDF9,
        #F0F4FD
    );
    border-radius: 5px;
    position: relative;
    top: -3px;
    left: -2px;
    height: 100%;
    height: calc(100% + 2px);


    box-shadow: -5px 0 4px -2px #EDECFA inset,
        -8px 0 6px -6px #EBEFF8 inset,
        3px 0 1px -1px #E9D4CF inset,
        6px 0 5px -5px #E1E8FA inset,

        0 0 0.25px 0.25px #E9D4CF,
        -0.75px -0.75px 1px -0.5px #E9D4CF,
        0 1px 1px #BEA19B,
        
        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
        -7px -3px 7px rgba(201, 149, 135, 0.55),
        -10px -10px 15px rgba(201, 149, 135, 0.25);
}

.letter-container {
    display: grid;
    width: 450px;
    height: 66px;

    background-color: transparent;

    grid-template-columns: repeat(10, 1fr);
    column-gap: 1px;

    position: absolute;
    bottom: 145px;
    left: 170px;

    border-radius: 3px;

    box-shadow: -0.5px -0.5px 0.75px #B98A7A,
        -2px -2px 2px #E0B9A8,
        0.5px 0.5px 1px -0.25px #E1B8A6 inset,
        1px 1px 1px 0.5px #E9BCA9 inset,
        4px 4px 4px rgba(251, 228, 222, 0.25) inset;

    padding: 5px;
}

.letter-container > div {
    background-color: #19161D;
    background-image: linear-gradient(
        var(--letter-1) 20%,
        var(--letter-2) 30% 50%,
        #2C2934 50%,
        #1C1B29,
        #342127
    );

    border-radius: 1px;

    box-shadow: 0 0.5px 0.5px #A6857E inset,
        0 1px 2px rgba(67, 38, 40, 0.25) inset,
        0.5px 0 0.25px rgba(105, 90, 95, 0.5),
        
        0 -1px 0.5px #4D3326 inset,
        0 -15px 5px -5px #2A1A1A inset,
        0 1px 1px #D6B6A7,
        0 5px 3px #F0D0C1,
        
        0 12px 5px rgba(26, 26, 36, 0.1) inset;

    position: relative;
}

.letter-container > div:nth-child(2) {
    --letter-1: #D55622;
    --letter-2: #E05F0B;
}

.letter-container > div:nth-child(3) {
    --letter-1: #FE3339;
    --letter-2: #FE3336;
}

.letter-container > div:nth-child(4) {
    --letter-1: #F84524;
    --letter-2: #FA5229;
}

.letter-container > div:nth-child(5) {
    --letter-1: #F78336;
    --letter-2: #FA9634;
}

.letter-container > div:nth-child(6) {
    --letter-1: #FDC32A;
    --letter-2: #FCDA47;
}

.letter-container > div:nth-child(7) {
    --letter-1: #DEBF27;
    --letter-2: #D8D03D;
}

.letter-container > div:nth-child(8) {
    --letter-1: #03A7DA;
    --letter-2: #0BB3FA;
}

.letter-container > div:nth-child(9) {
    --letter-1: #2D50B4;
    --letter-2: #3362CA;
}

.letter-container > div:nth-child(10) {
    --letter-1: #734897;
    --letter-2: #6D56BE;
}

.letter-container > div > p {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 13px;
    color: #E6DFEF;
    font-family: sans-serif;
    text-shadow: 0.15px 0 0.5px #E6DFEF,
        -0.15px 0 0.5px #E6DFEF,
        1px 0 1px #33292A,
        -2px 0 2px #1A1420;
}

.button-container {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: 1px;

    width: 450px;
    height: 65px;
    border-radius: 2px;

    position: absolute;
    left: 170px;
    bottom: 220px;

    background-color: transparent;

    box-shadow: 0 0 2px #DDABA0 inset,
        0 0 1px #DDABA0,
        0 -1px 2px #F1CBC2,
        0 -1.5px 2px #FDE4DD,
        0 1px 2px #E9CDBF,
        0 1.5px 2px #FADACF,
        
        0 1.5px 1.5px -0.5px #D69C8E inset,
        0 10px 10px -5px #E0B2A2 inset,
        0 -10px 5px -5px rgba(178, 83, 65, 1) inset;
}

.button-container .button {
    border-radius: 3px;

    background-image: linear-gradient(
        var(--button-1),
        var(--button-2),
        var(--button-3),
        var(--button-4)
    );

    box-shadow: 0 0 0.25px var(--button-3),
        -0.5px -0.75px 1px  rgba(241, 249, 255, 0.15) inset,
        -0.75px -1.5px 1.5px rgba(44, 6, 13, 0.05) inset,
    
        0 -0.5px 0.75px 0.25px var(--button-1),
        0 0.5px 0.75px 0.25px var(--button-4),

        0 -0.75px 2px -0.75px var(--button-1),
        0 0.75px 2px -0.75px var(--button-4),

        -0.5px -2px 3px 0.75px rgba(44, 6, 13, 0.9),
        -15px -20px 20px 2px rgba(150, 90, 64, 0.35),
        
        -7px -7px 5px -0.5px rgba(150, 90, 64, 0.5),
        -7px -3px 7px rgba(201, 149, 135, 0.55),
        -10px -10px 15px rgba(201, 149, 135, 0.25);

    position: relative;
    bottom: -3px;
    left: -1.5px;

    z-index: 11;

    height: 100%;
    height: calc(100% - 3px);
}

.button-container .button:nth-child(2) {
    --button-1: #884B36;
    --button-2: #8A4631;
    --button-3: #BD6E48;
    --button-4: #C2724D;

    --center-1: #AC5B3D;
    --center-2: #AE5E43;
    --center-3: #BD6E48;
    --center-4: #AA624A;
    --center-5: #AE5E3D;
    --center-6: #C77E5B;

    z-index: 10;
}

.button-container .button:nth-child(3) {
    --button-1: #C1353E;
    --button-2: #C22B3A;
    --button-3: #E42D49;
    --button-4: #E32C3E;

    --center-1: #D5132B;
    --center-2: #DD1F3B;
    --center-3: #E42849;
    --center-4: #E33E50;
    --center-5: #D51A39;
    --center-6: #F44661;
    
    z-index: 9;
}

.button-container .button:nth-child(4) {
    --button-1: #CC3929;
    --button-2: #D73825;
    --button-3: #FD5332;
    --button-4: #F2501F;

    --center-1: #F83D1E;
    --center-2: #FD4022;
    --center-3: #FC4D2E;
    --center-4: #FF5A3D;
    --center-5: #F0361F;
    --center-6: #FF6959;
    
    z-index: 8;
}

.button-container .button:nth-child(5) {
    --button-1: #F2AC26;
    --button-2: #F0AC19;
    --button-3: #F0B31C;
    --button-4: #ECAF19;

    --center-1: #E8A321;
    --center-2: #F0AD14;
    --center-3: #F3B61D;
    --center-4: #F1A943;
    --center-5: #EBAA09;
    --center-6: #FBC131;
    
    z-index: 7;
}

.button-container .button:nth-child(6) {
    --button-1: #FCB829;
    --button-2: #F7CF31;
    --button-3: #FFDB3C;
    --button-4: #FBDB4C;

    --center-1: #FFD531;
    --center-2: #F6DC41;
    --center-3: #FFDA3B;
    --center-4: #FFE470;
    --center-5: #FFD038;
    --center-6: #FFE160;
    
    z-index: 6;
}

.button-container .button:nth-child(7) {
    --button-1: #B5D496;
    --button-2: #A1D890;
    --button-3: #B5F4A7;
    --button-4: #B3EAA4;

    --center-1: #BDE899;
    --center-2: #B8ED9F;
    --center-3: #C6F6AA;
    --center-4: #B7E6B8;
    --center-5: #C6F6AC;
    --center-6: #D9FEBB;
    
    z-index: 5;
}

.button-container .button:nth-child(8) {
    --button-1: #3F88B5;
    --button-2: #3494C7;
    --button-3: #0FCEFB;
    --button-4: #15CAF7;

    --center-1: #26B7F0;
    --center-2: #05BEFF;
    --center-3: #04C6FB;
    --center-4: #23D7FF;
    --center-5: #08C2F5;
    --center-6: #22D9FF;
    
    z-index: 4;
}

.button-container .button:nth-child(9) {
    --button-1: #4058A2;
    --button-2: #3C5FB9;
    --button-3: #0D7BF4;
    --button-4: #2680F8;

    --center-1: #1864DC;
    --center-2: #0071F1;
    --center-3: #1A7DE5;
    --center-4: #346DD4;
    --center-5: #016EE3;
    --center-6: #5298F0;
    
    z-index: 3;
}

.button-container .button:nth-child(10) {
    --button-1: #3D306E;
    --button-2: #503C79;
    --button-3: #6A5ABD;
    --button-4: #6A5ABD;

    --center-1: #5141A3;
    --center-2: #5647AE;
    --center-3: #6052B3;
    --center-4: #6758AB;
    --center-5: #574DAE;
    --center-6: #7B6BCE;
    
    z-index: 2;
}

.button-container .button .center {
    display: block;
    width: 100%;
    height: 35px;
    
    width: calc(100% + 2px);

    border-radius: 2px;

    position: absolute;
    top: 15px;
    left: -1px;

    background-image: linear-gradient(
        var(--center-1),
        var(--center-2),
        var(--center-3)
    );

    box-shadow: 0 0 0.5px var(--center-3),
    
    -3px -20px 14px 3px rgba(20, 7, 14, 0.15),
    3px 20px 14px -3px rgba(241, 249, 255, 0.025),
    -3px -17px 14px -3px rgba(241, 249, 255, 0.025),

    0 -20px 10px -10px rgba(44, 6, 13, 0.05) inset,
    0 -0px 10px -10px rgba(44, 6, 13, 0.05) inset,
    0 30px 20px -10px rgba(241, 249, 255, 0.05) inset,
    
    0 -0.25px 0.75px 0.25px var(--center-1),
    0 0.5px 0.75px 0.25px var(--center-3),

    0 -0.75px 2px -0.75px var(--center-1),
    0 0.75px 2px -0.75px var(--center-3),
    
    0 1px 1.75px -0.75px var(--center-4) inset,
    0 -3px 4px -3px var(--center-5) inset,
    
    0 3px 3px -3px var(--center-6),
    
    0 -4px 7px -4px var(--center-1),
    0 4px 7px -4px var(--center-6);
}

.button-container .button .center:nth-child(1) { z-index: 22; }
.button-container .button .center:nth-child(2) { z-index: 21; }
.button-container .button .center:nth-child(3) { z-index: 20; }
.button-container .button .center:nth-child(4) { z-index: 19; }
.button-container .button .center:nth-child(5) { z-index: 18; }
.button-container .button .center:nth-child(6) { z-index: 17; }
.button-container .button .center:nth-child(7) { z-index: 16; }
.button-container .button .center:nth-child(8) { z-index: 15; }
.button-container .button .center:nth-child(9) { z-index: 14; }
.button-container .button .center:nth-child(10) { z-index: 13; }

.range-container {
    display: block;
    width: 490px;
    height: 92px;
    background-color: transparent;

    position: absolute;
    left: 150px;
    bottom: 290px;

    border-radius: 0 0 6px 6px;

    box-shadow: -1px 1px 3px -1px #945A42,
        0.5px -1px 1px #945A42 inset,
        -4px 2px 7px -2.25px #BD8974,
        1px -1px 1px -1px #BD8974 inset,
        1px -1px 1.5px -1px #CF9981 inset,
        
        -0.5px -0.5px 0.5px #FFEDE0 inset,
        -1.5px -1.5px 2px -1px #FFE8DB inset,
        -4px -1.5px 4px -2px #FEDACA inset,
        
        2px 1px 2px -1px #FEDACA,
        
        0 0 10px #FBDAD1,
        -10px 10px 25px rgba(60, 3, 0, 0.015);
}

.range-plate {
    display: block;
    width: 455px;
    height: 65px;

    position: absolute;
    left: 17px;
    top: 11px;

    border-radius: 1.5px;

    background-color: #BBC9E6;

    background-image: linear-gradient(rgba(134, 141, 169, 0.1) 0 25%, transparent 25% 50%, rgba(143, 150, 178, 0.1) 50% 75%, transparent 75%),
        linear-gradient(90deg, rgba(159, 167, 188, 0.05), rgba(119, 130, 160, 0.1), rgba(159, 167, 188, 0.05)),
        radial-gradient(rgba(167, 172, 202, 0.65), transparent 60%),
        radial-gradient(#7B8.........完整代码请登录后点击上方下载按钮下载查看