div+css布局实现游戏机手柄效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+css布局实现游戏机手柄效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
article {
  --joycon-left: #00c5e2;
  --joycon-left-shadow: #0128;
  --joycon-right: #ff6658;
  --joycon-right-shadow: #c218;
  position: relative;
  font-size: 1000px;
  width: 1000px;
  max-width: 1000px;
  height: 425.6px;
  background: #f000;
}

article *,
article *::before,
article *::after {
  position: absolute;
  box-sizing: border-box;
}

:focus {
  outline: 1px dashed;
  outline-offset: 2px;
}

.round {
  border-radius: 50%;
}

.comfort-grip,
.connector {
  display: none;
}

.body {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 721px;
  height: 99%;
}

.frame {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: 
    radial-gradient(farthest-side, #2f3638 50%, #0000) -1% 3% / 2% 2%,
    radial-gradient(farthest-side, #2f3638, #0000) 1% -0.75% / 2% 2%,
    radial-gradient(95% 70% at 0% 0%, #2f3638 85%, #fff3, #f000) 0.5% 0.75% / 1.55% 5.25% no-repeat,
    radial-gradient(farthest-side, #2f3638 50%, #0000) 101% 3% / 2% 2%,
    radial-gradient(farthest-side, #2f3638, #0000) 99% -0.75% / 2% 2%,
    radial-gradient(95% 70% at 100% 0%, #2f3638 85%, #fff3, #f000) 99.5% 0.75% / 1.55% 5.25% no-repeat,
    linear-gradient(#0000 1%, #fff3 2%, #0000 4%),
    linear-gradient(#0000 95%, #0008),
    #2f3638;
  background-repeat: no-repeat;
  box-shadow:
    inset -1.5px 0 0.75px -0.75px #fff5,
    inset 1.5px 0 0.75px -0.75px #fff6;
  -webkit-mask:
    radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 0 3.9% / 0.6% 1% no-repeat,
    radial-gradient(farthest-side at 100% 100%, #f00 99.99%, #f000) 1.7% 0% / 0.4% 1% no-repeat,
    radial-gradient(78.33% 60.33% at 0% 0%, #f000 99%, #f00) 0.5% 0.75% / 1.55% 5.25% no-repeat,
    radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 100% 3.9% / 0.6% 1% no-repeat,
    radial-gradient(farthest-side at 0% 100%, #f00 99.99%, #f000) 98.3% 0% / 0.4% 1% no-repeat,
    radial-gradient(78.33% 60.33% at 100% 0%, #f000 99%, #f00) 99.5% 0.75% / 1.55% 5.25% no-repeat,
    linear-gradient(#0000 4.7%, #000 0),
    linear-gradient(90deg,#0000 1.9%, #000 0 98.1%, #0000 0);
}

.frame::before {
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  height: 93%;
  border-radius: 11px;
  border: 0.3px solid #000;
  box-shadow: 
    0 0.45px 1px #fff8,
    inset 0 0.6px 1.5px -0.25px #000,
    inset 0 0.7px 1.5px -0.25px #fffc;
  background: 
    radial-gradient(circle at 32.7% 98%, #0e0e0e 0.9%, #000 0 1%, #0e0e0e 0 1.2%, #0000 0),
    linear-gradient(#0e0e0e 0 0) 32.33% 100% / 2.1% 2% no-repeat,
    #000;
}

.screen {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 77.5%;
  border-radius: 1.5px;
  background: #292d30;
  box-shadow: inset 0 1.5px 5px -1.5px #000c;
}

.controller {
  --color: var(--joycon-left);
  --color-shadow: var(--joycon-left-shadow);
  --connection: 20px 10.5px 0 -12.3px #020100;
  width: 138.5px;
  height: 99%;
  bottom: 0;
  left: 0;
  border-radius: 90px 4px 2px 90px;
  background: 
    var(--color);
  box-shadow:
    var(--connection),
    inset 1px -9px 10px -3px #0125, /* modif */
    inset 35px 0 25px -25px #0002,
    inset -2px 0 4px var(--color),
    inset 6px 16px 5px -8px var(--color),
    inset 0 17px 5px -8px #fff,
    inset 5px -5px 10px -4px var(--color-shadow);
}

.controller::before {
  content: "";
  width: 2.75px;
  aspect-ratio: 1;
  background: #393537;
  box-shadow: inset 0.1px 0.75px 0.4px #fff3;
  left: 100%;
  top: 97.75%;
  border-radius: 50%;
}

.controller.right {
  --color: var(--joycon-right);
  --color-shadow: var(--joycon-right-shadow);
  --connection: -0.02em 0.0105em 0 -0.0123em #020100;
  left: auto;
  right: 0;
  border-radius: 4px 90px 90px 2px;
  box-shadow:
    var(--connection),
    inset -0.001em -0.009em 0.01em -0.003em #2107,
    inset -0.035em 0 0.025em -0.025em #0002,
    inset 0.002em 0 0.004em var(--color),
    inset -0.006em 0.016em 0.005em -0.008em var(--color),
    inset 0 0.017em 0.005em -0.008em #fff,
    inset -0.01em 0 0.01em -0.004em var(--color-shadow);
}

.controller.right::before {
  left: auto;
  right: 100%;
  box-shadow: inset -0.0001em 0.00075em 0.0004em #fff3;
}
button {
  border: 0;
  font-size: 1em;
  padding: 0;
}

.bar {
  display: none;
}

.minus {
  --c: #404040;
  width: 17%;
  height: 1.8%;
  background: var(--c);
  top: 8.9%;
  right: 7.7%;
  border-radius: 0.0015em;
  border: 0.001em solid var(--color-shadow);
  box-shadow:
    inset 0.00075em -0.00075em 0.0005em #0008,
    inset -0.0006em 0 0.0005em #0003,
    inset 0 0.00075em 0.0005em #fff6,
    0 0.002em 0.0025em -0.001em #0006;
}

.plus {
  left: 7.7%;
  right: auto;
}

.plus::before {
  content: "";
  width: 35%;
  height: 400%;
  background: var(--c);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.0015em;
  border: 0.001em solid var(--color-shadow);
  box-shadow:
    0 0.004em 0.02em var(--color-shadow),
    inset -0.0006em 0 0.0004em #0007,
    inset 0.0006em 0 0.0004em #0007,
    inset 0 -0.001em 0.0005em -0.0002em #0008,
    inset 0 0.00075em 0.0005em -0.0002em #fff6;
}

.plus::after {
  content: "";
  width: 35%;
  aspect-ratio:1 ;
  background: 
    /* top left */
    radial-gradient(circle at 0 0, #834 20%, #0000 20% 35%, var(--c) 0) 0 0 / 50% 50%,
    conic-gradient(at 0 0, #000, #fff) 1% 1% / 40% 40%,
    /* top right */
    radial-gradient(circle at 100% 0, #834 20%, #0000 20% 35%, var(--c) 0) 100% 0 / 50% 50%,
    conic-gradient(at 100% 0, #fff 25%, #000) 99% 1% / 40% 40%,
    /* bottom left */
    radial-gradient(circle at 0% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 1% 99% / 50% 50%,
    radial-gradient(at 0% 100%,  #0008, #0000) 1% 99% / 40% 40%,
    /* bottom right */
    radial-gradient(circle at 100% 100%, #834 20%, #0000 20% 35%, var(--c) 0) 99% 99% / 50% 50%,
    radial-gradient(at 100% 100%,  #0008, #0000) 100% 99% / 40% 40%,
    var(--c);
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mushroom {
  width: 47%;
  aspect-ratio: 1;
  border: 0.001em solid var(--color-shadow);
  top: 17.5%;
  left: 30%;
  background:
    radial-gradient(circle at 50% 0, #6669, #6660 60%),
    #2a2e31;
  box-shadow:
    /* inside */
    inset 0 0.0001em 0.00125em -0.0005em var(--color),
    inset 0 0.003em 0.003em #0004,
    inset 0 -0.005em 0.003em #0006,
    /* shadows */
    0 -0.0009em 0.001em 0.001em #0003,
    0 0.00075em 0.001em 0.001em #0003,
    0 0.01em 0.01em -0.0025em #0004,
    0 0.025em 0.035em var(--color-shadow);
}

.right .mushroom {
  top: 45.25%;
  left: 23.25%
}

.mushroom::before {
  content: "";
  width: 80%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  background: radial-gradient(circle at 50% 0, #6669, #6660 60%);
  box-shadow:
    inset 0 0 0.001em #0008,
    inset 0 0.002em 0.002em #0008,
    inset 0 -0.001em 0.001em 0.001em #fff4,
    0 0.001em 0.001em #fff2,
    0 -0.0007em 0.001em 0.0006em #0008,
    0 -0.0025em 0.0015em 0.0006em #fff2
}

.mushroom::after {
  content: "";
  width: 95%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; 
  background: 
    /* up */
    linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 0 / 3% 12%,
    linear-gradient(#000 5%, #444 15% 30%, #666 50%, #3c3c3c, #484848) 50% 0 / 3% 12%,
    /* left */
    linear-gradient(#0000 30% 90%, #fff) 0% 50% / 12% 3%,
    linear-gradient(#000, #0000 30% 70%, #000) 0% 50% / 12% 3%,
    linear-gradient(90deg, #fff4, #222 10% 50%, #444) 0% 50% / 12% 3%,
    /* right */
    linear-gradient(#0000 30% 90%, #fff) 100% 50% / 12% 3%,
    linear-gradient(#000, #0000 30% 70%, #000) 100% 50% / 12% 3%,
    linear-gradient(to left, #fff4, #222 10% 50%, #444) 100% 50% / 12% 3%,
    /* down */
    linear-gradient(90deg, #000, #0000 20% 80%, #000) 50% 100% / 3% 12%,
    linear-gradient(to top, #fff4, #111 15% 50%, #444) 50% 100% / 3% 12%,
    #f000;
  background-repeat: no-repeat;
}

.direction {
  display: grid;
  place-items: center;
  width: 23%;
  aspect-ratio: 1;
  border: 0.0007em solid var(--color-shadow);
  background:
    linear-gradient(#fff2, #fff0),
    #35393c;
  box-shadow:
    0 0.002em 0.007em var(--color-shadow),
    inset 0 0.0001em 0.0015em -0.0005em var(--color),
    inset 0 0 0.0005em 0.001em #323439,
    inset 0 0.002em 0.001em 0.0002em #def5,
    inset 0 -0.001em 0.0005em 0.0002em #000,
    inset 0 -0.001em 0.001em 0.002em #000c
}

.direction::before {
  font-size: 0.0175em;
  font-family: Helvetica, sans-serif;
  color: #fffa;
}

.arrow::before,
.arrow::after {
  content: "";
  width: 40%;
  top: 50%;
  left: 50%;
  transform: transla.........完整代码请登录后点击上方下载按钮下载查看