div+css实现一款合成器UI界面效果代码
代码语言：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 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 15zM39.5 277a7.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 0zM81 309a7.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 15z' fill-rule='evenodd' fill='currentColor'></path>
</svg>
</div>
</div>
<div class='plate__item plate__item--w-2 plate__item--power'>
<div class='key-knob key-knob--tight'>
<div class='key-knob__inner'>
<div class='key-knob__control'></div>
</div>
</div>
<div class='key-placeholder'></div>
</div>
<div class='plate__item plate__item--w-4 plate__item--h-2 plate__item--screen'>
<div class='screen'>
<svg viewbox='0 0 349 159'>
<path clip-rule='evenodd' d='M175.5 24H174V34H175.5V24ZM180.547 55.6914C181.151 56.0508 181.151 56.9492 180.547 57.3086L170.358 63.3735C169.755 63.7329 169 63.2837 169 62.5649L169 50.4351C169 49.7163 169.755 49.2671 170.358 49.6265L180.547 55.6914ZM182 100H167V111C167 112.105 167.895 113 169 113H174V105H175.5V113H180C181.105 113 182 112.105 182 111V100Z' fill-rule='evenodd' fill='#D9D9D9'></path>
<path clip-rule='evenodd' d='M349 134H0V138H349V134ZM349 140H0V144H349V140ZM0 146H349V150H0V146ZM349 152H0V156H349V152Z' fill-rule='evenodd' fill='#252525'></path>
<path clip-rule='evenodd' d='M121 55.5C121 67.098 111.598 76.5 100 76.5C88.402 76.5 79 67.098 79 55.5C79 43.902 88.402 34.5 100 34.5C111.598 34.5 121 43.902 121 55.5ZM132 55.5C132 73.1731 117.673 87.5 100 87.5C91.8738 87.5 84.4551 84.471 78.8113 79.4805L97.3485 113.079L124.748 103.294L124.94 103.225L125.141 103.263L174.75 112.736L223.359 103.413L223.564 103.374L223.76 103.447L251.058 113.537C254.718 103.679 257.131 97.086 259.546 90.4921L259.547 90.4888L259.548 90.4868C262.018 83.7389 264.49 76.9891 268.297 66.7389L269.703 67.2611C265.896 77.5107 263.425 84.2588 260.954 91.0079L260.953 91.0115L260.952 91.0141L260.951 91.0155L260.95 91.0183C258.48 97.7644 256.009 104.513 252.203 114.761L251.942 115.463L251.24 115.203L223.436 104.926L174.891 114.237L174.75 114.264L174.609 114.237L125.06 104.775L97.2523 114.706L96.6515 114.921L96.3433 114.362L74.6272 75.0019C70.4713 69.6029 68 62.8401 68 55.5C68 37.8269 82.3269 23.5 100 23.5C117.673 23.5 132 37.8269 132 55.5ZM185 25H186.5V33H185V25ZM197.5 25H196V33H197.5V25ZM163 25H164.5V33H163V25ZM153.5 25H152V33H153.5V25Z' fill-rule='evenodd' fill='#3D3933'></path>
<path clip-rule='evenodd' d='M130 109.75C130 112.373 127.873 114.5 125.25 114.5C122.627 114.5 120.5 112.373 120.5 109.75C120.5 107.127 122.627 105 125.25 105C127.873 105 130 107.127 130 109.75ZM131.5 109.75C131.5 113.202 128.702 116 125.25 116C121.798 116 119 113.202 119 109.75C119 106.298 121.798 103.5 125.25 103.5C128.702 103.5 131.5 106.298 131.5 109.75ZM102.5 112.05C102.5 114.121 100.821 115.8 98.75 115.8C96.6789 115.8 95 114.121 95 112.05C95 109.979 96.6789 108.3 98.75 108.3C100.821 108.3 102.5 109.979 102.5 112.05ZM246 112.05C246 114.121 247.679 115.8 249.75 115.8C251.821 115.8 253.5 114.121 253.5 112.05C253.5 109.979 251.821 108.3 249.75 108.3C247.679 108.3 246 109.979 246 112.05ZM217 109.75C217 113.202 219.798 116 223.25 116C226.702 116 229.5 113.202 229.5 109.75C229.5 106.298 226.702 103.5 223.25 103.5C219.798 103.5 217 106.298 217 109.75ZM175.5 116H174V159H175.5V116Z' fill-rule='evenodd' fill='#A1A3A4'></path>
<path clip-rule='evenodd' d='M169.5 74H171.5V87H169.5V74ZM177.5 74H179.5V87H177.5V74ZM13.4523 94.8251C13.4523 94.0437 13.693 93.5302 13.9845 93.2189C14.2796 92.9037 14.6672 92.75 15.0534 92.75C15.4397 92.75 15.8273 92.9037 16.1224 93.2189C16.4139 93.5302 16.6546 94.0437 16.6546 94.8251V103.363C16.6546 104.418 17.0117 105.276 17.6098 105.872C18.2007 106.461 18.9832 106.75 19.7557 106.75C20.5283 106.75 21.3108 106.461 21.9016 105.872C22.4997 105.276 22.8569 104.418 22.8569 103.363V94.8251C22.8569 94.0437 23.0976 93.5302 23.3891 93.2189C23.6841 92.9037 24.0718 92.75 24.458 92.75C24.8442 92.75 25.2319 92.9037 25.5269 93.2189C25.8185 93.5302 26.0592 94.0437 26.0592 94.8251V103.363C26.0592 104.418 26.4163 105.276 27.0144 105.872C27.6052 106.461 28.3877 106.75 29.1603 106.75C29.9329 106.75 30.7154 106.461 31.3062 105.872C31.9043 105.276 32.2615 104.418 32.2615 103.363V94.8251C32.2615 93.2744 33.1248 92.75 33.7557 92.75C34.3866 92.75 35.25 93.2744 35.25 94.8251V96.5829H36.75V94.8251C36.75 92.609 35.3691 91.25 33.7557 91.25C32.1423 91.25 30.7615 92.609 30.7615 94.8251V103.363C30.7615 104.067 30.5308 104.527 30.2472 104.81C29.9564 105.1 29.5633 105.25 29.1603 105.25C28.7573 105.25 28.3642 105.1 28.0734 104.81C27.7898 104.527 27.5592 104.067 27.5592 103.363V94.8251C27.5592 93.7231 27.2121 92.824 26.6219 92.1937C26.0353 91.5671 25.2474 91.25 24.458 91.25C23.6687 91.25 22.8808 91.5671 22.2941 92.1937C21.704 92.824 21.3569 93.7231 21.3569 94.8251V103.363C21.3569 104.067 21.1262 104.527 20.8426 104.81C20.5518 105.1 20.1587 105.25 19.7557 105.25C19.3527 105.25 18.9596 105.1 18.6688 104.81C18.3852 104.527 18.1546 104.067 18.1546 103.363V94.8251C18.1546 93.7231 17.8075 92.824 17.2173 92.1937C16.6307 91.5671 15.8428 91.25 15.0534 91.25C14.2641 91.25 13.4762 91.5671 12.8895 92.1937C12.2994 92.824 11.9523 93.7231 11.9523 94.8251V103.363C11.9523 104.067 11.7217 104.527 11.4381 104.81C11.1472 105.1 10.7541 105.25 10.3511 105.25C9.94815 105.25 9.55506 105.1 9.26423 104.81C8.98064 104.527 8.75 104.067 8.75 103.363V101.605H7.25V103.363C7.25 104.418 7.60715 105.276 8.20523 105.872C8.79608 106.461 9.57857 106.75 10.3511 106.75C11.1237 106.75 11.9062 106.461 12.4971 105.872C13.0951 105.276 13.4523 104.418 13.4523 103.363V94.8251Z' fill-rule='evenodd' fill='#555F68'></path>
<path class='screen__eye-r' clip-rule='evenodd' d='M249 96C271.368 96 289.5 77.8675 289.5 55.5C289.5 33.1325 271.368 15 249 15C226.632 15 208.5 33.1325 208.5 55.5C208.5 77.8675 226.632 96 249 96ZM249 98C272.472 98 291.5 78.9721 291.5 55.5C291.5 32.0279 272.472 13 249 13C225.528 13 206.5 32.0279 206.5 55.5C206.5 78.9721 225.528 98 249 98ZM273 55.5C273 68.4199 262.791 78.9553 250 79.4795V92H248V79.4795C235.209 78.9553 225 68.4199 225 55.5C225 42.5801 235.209 32.0447 248 31.5205V19H250V31.5205C262.791 32.0447 273 42.5801 273 55.5ZM261 55.5C261 57.3962 260.56 59.1897 259.777 60.7841L261.602 61.8838C262.075 62.1689 262.227 62.7835 261.942 63.2565C261.657 63.7295 261.042 63.8819 260.569 63.5968L258.748 62.4993C256.57 65.5278 253.015 67.5 249 67.5C244.977 67.5 241.416 65.5202 239.239 62.4818L237.389 63.5968C236.916 63.8819 236.301 63.7295 236.016 63.2565C235.731 62.7835 235.883 62.1689 236.356 61.8838L238.214 60.7646C237.436 59.1752 237 57.3885 237 55.5C237 49.2093 241.84 44.0492 248 43.5411V41C248 40.4477 248.448 40 249 40C249.552 40 250 40.4477 250 41V43.5411C256.16 44.0492 261 49.2093 261 55.5ZM249 58.25C250.519 58.25 251.75 57.0188 251.75 55.5C251.75 53.9812 250.519 52.75 249 52.75C247.481 52.75 246.25 53.9812 246.25 55.5C246.25 57.0188 247.481 58.25 249 58.25Z' fill-rule='evenodd' fill='#D9D9D9'></path>
<path class='screen__eye-l' clip-rule='evenodd' d='M100 96C122.368 96 140.5 77.8675 140.5 55.5C140.5 33.1325 122.368 15 100 15C77.6325 15 59.5 33.1325 59.5 55.5C59.5 77.8675 77.6325 96 100 96ZM100 98C123.472 98 142.5 78.9721 142.5 55.5C142.5 32.0279 123.472 13 100 13C76.5279 13 57.5 32.0279 57.5 55.5C57.5 78.9721 76.5279 98 100 98ZM101 79.4795C113.791 78.9553 124 68.4199 124 55.5C124 42.5801 113.791 32.0447 101 31.5205V19H99V31.5205C86.2089 32.0447 76 42.5801 76 55.5C76 68.4199 86.2089 78.9553 99 79.4795V92H101V79.4795ZM112 55.5C112 57.3962 111.56 59.1897 110.777 60.7841L112.602 61.8838C113.075 62.1689 113.227 62.7835 112.942 63.2565C112.657 63.7295 112.042 63.8819 111.569 63.5968L109.748 62.4993C107.57 65.5278 104.015 67.5 100 67.5C95.9769 67.5 92.4162 65.5202 90.239 62.4818L88.3888 63.5968C87.9158 63.8819 87.3013 63.7295 87.0162 63.2565C86.7311 62.7835 86.8835 62.1689 87.3565 61.8838L89.2135 60.7646C88.4363 59.1752 88 57.3885 88 55.5C88 49.2093 92.8405 44.0492 99 43.5411V41C99 40.4477 99.4477 40 100 40C100.552 40 101 40.4477 101 41V43.5411C107.16 44.0492 112 49.2093 112 55.5ZM100 58.25C101.519 58.25 102.75 57.0188 102.75 55.5C102.75 53.9812 101.519 52.75 100 52.75C98.4812 52.75 97.25 53.9812 97.25 55.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0