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