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