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

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

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