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), inset 1em 0.5em 0.5em rgba(0, 0, 0, 0.2), 0.5em 0.5em 0 rgba(255, 255, 255, 0.3);
}

.logo {
  grid-row-end: span 2;
  height: calc(var(--br) * 2);
  display: flex;
  gap: calc(var(--br) / 5);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  color: #171a1c;
}
.logo__text {
  font-size: calc(var(--br) / 2);
  font-weight: 100;
  letter-spacing: -0.06em;
  -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.logo__tag {
  font-size: calc(var(--br) / 8);
  padding: 0.4em 0.4em 0.3em;
  border: 0.12em solid #000;
  border-radius: 0.3em;
}

.power-switch {
  --_width: calc(var(--br) / 3.2);
  --_height: calc(var(--br) / 1.2);
  position: absolute;
  z-index: -1;
  right: calc(var(--_width) * -1);
  bottom: calc( 100% / 6 - var(--case-padding) * 2 + var(--_height) / 2 - var(--keys-gap) * 6 );
  width: var(--_width);
  height: var(--_height);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.1)), var(--plate-color);
  border-radius: 0 calc(var(--_width) / 2.5) calc(var(--_width) / 2.5) 0;
  box-shadow: -1.25em 0 0 -0.25em rgba(0, 0, 0, 0.35) inset;
}

@-webkit-keyframes animRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}

@keyframes animRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
@-webkit-keyframes animRuler {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-44px);
  }
}
@keyframes animRuler {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-44px);
  }
}
@-webkit-keyframes animTracks {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-340px);
  }
}
@keyframes animTracks {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-340px);
  }
}
@-webkit-keyframes animScreenLevelMeter {
  0% {
    height: 42px;
    y: 74px;
  }
  10% {
    height: 67.9px;
    y: 48.1px;
  }
  20% {
    height: 41.3px;
    y: 74.7px;
  }
  30% {
    height: 49px;
    y: 67px;
  }
  40% {
    height: 45.5px;
    y: 70.5px;
  }
  50% {
    height: 63px;
    y: 53px;
  }
  60% {
    height: 59.5px;
    y: 56.5px;
  }
  70% {
    height: 61.6px;
    y: 54.4px;
  }
  80% {
    height: 67.9px;
    y: 48.1px;
  }
  90% {
    height: 66.5px;
    y: 49.5px;
  }
  100% {
    height: 42px;
    y: 74px;
  }
}
@keyframes animScreenLevelMeter {
  0% {
    height: 42px;
    y: 74px;
  }
  10% {
    height: 67.9px;
    y: 48.1px;
  }
  20% {
    height: 41.3px;
    y: 74.7px;
  }
  30% {
    height: 49px;
    y: 67px;
  }
  40% {
    height: 45.5px;
    y: 70.5px;
  }
  50% {
    height: 63px;
    y: 53px;
  }
  60% {
    height: 59.5px;
    y: 56.5px;
  }
  70% {
    height: 61.6px;
    y: 54.4px;
  }
  80% {
    height: 67.9px;
    y: 48.1px;
  }
  90% {
    height: 66.5px;
    y: 49.5px;
  }
  100% {
    height: 42px;
    y: 74px;
  }
}
@-webkit-keyframes animSideLevelMeter {
  0% {
    height: 42%;
  }
  10% {
    height: 67.9%;
  }
  20% {
    height: 41.3%;
  }
  30% {
    height: 49%;
  }
  40% {
    height: 45.5%;
  }
  50% {
    height: 63%;
  }
  60% {
    height: 59.5%;
  }
  70% {
    height: 61.6%;
  }
  80% {
    height: 67.9%;
  }
  90% {
    height: 66.5%;
  }
  100% {
    height: 42%;
  }
}
@keyframes animSideLevelMeter {
  0% {
    height: 42%;
  }
  10% {
    height: 67.9%;
  }
  20% {
    height: 41.3%;
  }
  30% {
    height: 49%;
  }
  40% {
    height: 45.5%;
  }
  50% {
    height: 63%;
  }
  60% {
    height: 59.5%;
  }
  70% {
    height: 61.6%;
  }
  80% {
    height: 67.9%;
  }
  90% {
    height: 66.5%;
  }
  100% {
    height: 42%;
  }
}
</style>

  
  
</head>

<body>
  <div class='case'>
  <div class='plate'>
    <div class='plate__item plate__item--w-2 plate__item--h-2'>
      <div class='speaker'>
        <svg viewbox='0 0 309 309'>
          <path clip-rule='evenodd' d='M88.5 7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm24.5 0a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM32 39.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm24.5 0a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zM32 64a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zM81 64a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM15 81a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm24.5 0a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM15 105.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-301.5 32a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM15 154.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-301.5 32a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM15 203.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm-301.5 32a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zm32-7.5a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0zm17 7.5a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM39.5 252.5a7.5 7.5 0 1 1-15 0.........完整代码请登录后点击上方下载按钮下载查看