div+css实现一款合成器UI界面效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css实现一款合成器UI界面效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
<style>
:root {
  --br: 5vw;
  --keys-gap: 2px;
  --keys-padding: calc(var(--br) / 6);
  --shadow-angle: 135deg;
  --case-color: #b4b4b4;
  --case-padding: calc(var(--br) / 4);
  --plate-color: #e7e4e2;
}

@media (max-width: 800px) {
  :root {
    --keys-gap: 1px;
  }
}
html,
body {
  height: 100%;
}

body {
  background: linear-gradient(var(--shadow-angle), #5c5b60, #2b2b2d);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: -0.01em;
  color: #3f454a;
}

svg {
  fill: none;
}

.case {
  --_font-size: calc(var(--br) / 30);
  display: flex;
  gap: var(--case-padding);
  padding: var(--case-padding);
  width: 85%;
  position: relative;
  background: linear-gradient(var(--shadow-angle), #c9c9c9, #a3a3a5), var(--case-color);
  border-radius: 8em;
  font-size: var(--_font-size);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0.4), 0.5em 0.5em 0 rgba(0, 0, 0, 0.15), 0.5em 0.5em 0 1em #727273, 6em 6em 18em rgba(0, 0, 0, 0.2), 2em 2em 8em rgba(0, 0, 0, 0.2);
}
.case--animated .screen__eye-l {
  -webkit-animation: animRotate 4s linear infinite;
          animation: animRotate 4s linear infinite;
}
.case--animated .screen__eye-r {
  -webkit-animation: animRotate 1.5s linear infinite;
          animation: animRotate 1.5s linear infinite;
}
.case--animated .screen__tracks {
  -webkit-animation: animTracks 8s linear infinite;
          animation: animTracks 8s linear infinite;
}
.case--animated .screen__tracks-ruler {
  -webkit-animation: animRuler 1025ms linear infinite;
          animation: animRuler 1025ms linear infinite;
}
.case--animated .screen__level {
  -webkit-animation: animScreenLevelMeter 1.5s ease-in infinite;
          animation: animScreenLevelMeter 1.5s ease-in infinite;
}
.case--animated .level-meter__bar::before {
  -webkit-animation: animSideLevelMeter 1.5s ease-in infinite;
          animation: animSideLevelMeter 1.5s ease-in infinite;
}

.plate {
  --_columns: 17;
  --_rows: 6;
  aspect-ratio: var(--_columns)/var(--_rows);
  display: grid;
  gap: var(--keys-gap);
  grid-template-columns: repeat(calc(var(--_columns) * 2), 1fr);
  grid-template-rows: repeat(var(--_rows), 1fr);
  padding: var(--keys-gap);
  border-radius: 1.5em;
  background-color: #000;
}
.plate__item {
  display: flex;
  grid-column: auto/span 2;
  background-color: var(--plate-color);
  border-radius: calc(var(--keys-gap) * 1.5);
  box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0.7), inset -0.5em -0.5em 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.plate__item--w-1-5 {
  grid-column-end: span 3;
}
.plate__item--w-2 {
  grid-column-end: span 4;
}
.plate__item--w-4 {
  grid-column-end: span 8;
}
.plate__item--h-2 {
  grid-row-end: span 2;
}
.plate__item--power {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.plate__item--screen {
  box-shadow: inset 0.5em 0.5em 0 rgba(255, 255, 255, 0.25), inset -0.5em -0.5em 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(var(--shadow-angle), #282828, #040507);
}

.speaker {
  width: 100%;
  height: 100%;
  padding: var(--keys-padding);
  color: #1c2025;
}
.speaker svg {
  display: block;
  filter: drop-shadow(0.3em 0.3em 0 #fff);
}

.screen {
  --_light-height: 110px;
  padding: var(--keys-padding);
}
.screen svg {
  width: 100%;
  height: 100%;
}
.screen__eye-l {
  transform-origin: 100px 55.5px;
}
.screen__eye-r {
  transform-origin: 249px 55.5px;
}

.key-placeholder {
  margin: var(--keys-padding);
  border-radius: 20%;
  box-shadow: 1.5em 1.5em 3em rgba(0, 0, 0, 0.2), -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.key {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  transition: box-shadow 200ms ease;
}
.key:active {
  box-shadow: inset 2.5em 2.5em 1.5em rgba(0, 0, 0, 0.1), inset 0.5em 0.5em 1.5em rgba(0, 0, 0, 0.4), inset -1em -1em 0.5em rgba(0, 0, 0, 0.1);
}
.key:before {
  content: "";
  position: absolute;
  inset: var(--keys-padding);
  border-radius: var(--br);
  box-shadow: 1.5em 1.5em 3em rgba(0, 0, 0, 0.2), -1.5em -1.5em 3em rgba(255, 255, 255, 0.8);
}
.key--sharp::before {
  aspect-ratio: 1;
  left: unset;
  right: unset;
}
.key--sharp::after {
  content: "";
  position: absolute;
  top: var(--keys-padding);
  bottom: var(--keys-padding);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(var(--shadow-angle), #363a3f, #161719);
  margin: calc(var(--br) / 18);
}
.key--sharp-right::before, .key--sharp-right::after {
  right: var(--_padding);
}
.key--sharp-left::before, .key--sharp-left::after {
  left: var(--_padding);
}
.key__inner {
  text-align: center;
  line-height: 1.1;
}
.key__icon {
  font-size: 0;
}
.key__icon svg {
  width: 70%;
}
.key__icon + .key__text {
  margin-top: 0.2em;
}
.key__text {
  font-size: calc(var(--br) / 6);
}
.key__text--medium {
  font-size: calc(var(--br) / 4);
}
.key__text--large {
  font-size: calc(var(--br) / 2.2);
  font-weight: 100;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.8);
}

.key-knob {
  margin: auto;
  width: 57%;
  aspect-ratio: 1;
  padding: 1.5%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  box-shadow: inset 0.5em 0.5em 0 rgba(0, 0, 0, 0.15), 0.5em 0.5em 0 rgba(255, 255, 255, 0.6);
}
.key-knob--tight {
  width: calc(100% - var(--keys-padding) * 2);
  padding: 5%;
  background-color: rgba(0, 0, 0, 0.08);
}
.key-knob--tight .key-knob__inner {
  background-color: #f4f4f4;
}
.key-knob--tight .key-knob__control {
  --key-knob-bg-color: #fafafa;
  width: 75%;
}
.key-knob--tight .key-knob__control:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0.5em 0.5em 0 rgba(0, 0, 0, 0.2), 0.5em 0.5em 0 rgba(255, 255, 255, 0.8);
}
.key-knob__inner {
  display: flex;
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  border-radius: 50%;
  background-color: var(--plate-color);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.15);
}
.key-knob__inner:after {
  content: "";
  position: absolute;
  inset: 21%;
  border-radius: inherit;
  box-shadow: 0.5em 0.5em 0.5em 0 rgba(255, 255, 255, 0.8) inset, -0.5em -0.5em 0.5em 0 rgba(0, 0, 0, 0.25) inset, -0.5em -0.5em 0.5em 0 rgba(255, 255, 255, 0.42) inset, 1.5em 1.5em 1.5em -1em rgba(0, 0, 0, 0.25), 4.5em 4.5em 2em rgba(0, 0, 0, 0.12), 11em 11em 8em rgba(0, 0, 0, 0.2);
}
.key-knob__control {
  --key-knob-bg-color: #555;
  width: 45%;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  margin: auto;
  border-radius: inherit;
  cursor: ns-resize;
  background: linear-gradient(var(--shadow-angle), color-mix(in srgb, var(--key-knob-bg-color), #fff 15%), color-mix(in srgb, var(--key-knob-bg-color), #000 15%)), var(--key-knob-bg-color);
  box-shadow: -0.5em -0.5em 0.5em 0.25em rgba(0, 0, 0, 0.3) inset, 0.5em 0.5em 1.5em rgba(0, 0, 0, 0.45), 1em 1em 3em rgba(0, 0, 0, 0.3);
}
.key-knob__control:after {
  content: "";
  position: absolute;
  inset: 0.5em;
  border-radius: inherit;
  box-shadow: 1em 1em 0 -1em rgba(255, 255, 255, 0.6) inset;
}
.key-knob__control--blue {
  --key-knob-bg-color: #181c31;
}
.key-knob__control--ochre {
  --key-knob-bg-color: #99714a;
}
.key-knob__control--gray {
  --key-knob-bg-color: #7f7c7c;
}
.key-knob__control--orange {
  --key-knob-bg-color: #d54a20;
}

.right-panel {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
}

.mic-status {
  grid-row-end: span 1;
  width: calc(var(--br) / 14);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #000;
  box-shadow: 0.3em 0.3em 0 rgba(255, 255, 255, 0.7);
}

.level-meter {
  --_width: calc(var(--br) / 24);
  --_light-height: calc(var(--_width) * 2.1);
  --_lights: 14;
  grid-row-end: span 3;
  position: relative;
}
.level-meter:before {
  content: "";
  position: absolute;
  top: calc(var(--_light-height) * 3.8);
  left: 50%;
  width: calc(var(--_width) * 14);
  height: 0.5em;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.3);
}
.level-meter__bar {
  width: var(--_width);
  height: calc(var(--_light-height) * var(--_lights));
  position: relative;
  isolation: isolate;
  border-radius: var(--_width);
  background-color: #605e5b;
}
.level-meter__bar:before, .level-meter__bar:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.level-meter__bar:before {
  top: auto;
  background-color: #fff;
}
.level-meter__bar:after {
  background: radial-gradient(50% 50% at 50% 50%, transparent, transparent 75%, #d0c4b7 75%, #d0c4b7 100%) repeat 40% 0;
  background-size: 160% var(--_light-height);
  box-shadow: inset 0.5em 0.5em 0 rgba(0, 0, 0, 0.2).........完整代码请登录后点击上方下载按钮下载查看