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: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #252525;
  clip-path: polygon(52% -2%, 100% 80%, 0 80%, 48% -2%);
}

.arrow::before {
  top: 51.5%;
  background: #fff3;
  filter: blur(0.01em);
}

.arrow.right::before,
.arrow.right::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.arrow.left::before,
.arrow.left::after {
  transform: translate(-50%, -50%) rotate(-90deg) ;
}

.arrow.down::before,
.arrow.down::after {
  transform: translate(-50%, -50%) rotate(180deg) ;
}

.direction.up {
  top: 41.75%;
  left: 41.9%;
}

.direction.down {
  top: 56.6%;
  left: 41.9%;
}

.direction.left {
  left: 18.25%;
  top: 49.25%;
}

.direction.right {
  left: 65.75%;
  top: 49.25%;
}

.direction.x {
  top: 14%;
  left: 35%;
}

.direction.x::before {
  content: "X";
}

.direction.y {
  top: 21.5%;
  left: 11.25%
}

.direction.y::before {
  content: "Y";
}

.direction.a {
  top: 21.5%;
  left: 59%
}

.direction.a::before {
  content: "A";
}

.direction.b {
  top: 29%;
  left: 35%
}

.direction.b::before {
  content: "B";
}

.menu {
  width: 19.35%;
  aspect-ratio: 1;
  border: 0.0009em solid var(--color-shadow);
  top: 68.5%;
  left: 60.5%;
  border-radius: 0.003em;
  background: #464b50;
  box-shadow: 
    inset 0 0.001em 0.001em -0.0005em #fff6,
    inset 0 -0.001em 0.001em -0.0005em #0006
}

.menu::before {
  content: "";
  width: 67%;
  aspect-ratio: 1;
  background: #33393c;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    inset 0 0.0009em 0.00075em #0008,
    0 0.0008em 0.00075em #fff5
}

.lr {
  background: linear-gradient(#4c5153 50%, #030405 60%);
  top: -1%;
  right: 18%;
  width: 83.5%;
  height: 21%;
  border-radius: 100em 2em 0 0;
  clip-path: ellipse(140% 87% at 100% 0%);
  box-shadow:
    inset -0.004em 0 0.003em -0.003em #333,
    inset -0.007em 0 0.003em -0.003em #4c5153,
    inset 0 0.0015em 0.001em #444,
    inset -0.001em 0.00175em 0.001em #fff;
  z-index: -1;
}

.lr.rr {
  left: 18%;
  right: auto;
  transform: scaleX(-1);
}

.volume {
  width: 8.5%;
  height: 0.7%;
  background: linear-gradient(#444, #222);
  left: 13.3%;
  top: -0.6%;
  border-radius: 0.0005em 0.0005em 0 0;
  clip-path: polygon(-20% -100%, 32% -100%, 32% 0, 33% 35%, 66% 35%, 67% 0%, 67% -100%, 110% -100%, 110% 120%, -20% 120%);
  z-index: -1;
}

.home {
  top: 67.6%;
  left: 17.5%;
  display: grid;
  place-items: center;
  width: 25%;
  aspect-ratio: 1;
  border: 0.0007em solid var(--color-shadow);
  background:
    linear-gradient(#0001, #0005),
    radial-gradient(#0000 52.5%, #9c9a9a 54%),
    #404547;
}

.home::before {
  content: "";
  top: 23%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50%;
  height: 24.5%;
  background: conic-gradient(at 50% 0, #0000 132deg, #010202 0 228deg, #0000 0);
  box-shadow: 0 0.5px 0.75px -0.25px #fff8
}

.home::after {
  content: "";
  color: #010202;
  top: 46%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 39%;
  height: 24.5%;
  box-shadow: 
    inset -0.004em 0,
    inset 0.004em 0,
    inset 0 -0.004em 0,
    0 0.5px 0.75px -0.25px #fff5
}

/* demo */
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

button:active,
.active {
  background: yellow !important;
}

@media (max-width: 1010px) {
  article {
    width: 663px;
  }

  .controller {
    left: 102px;
  }

  .controller.right {
    right: 102px;
  }

  .body {
    display: none;
  }

  .comfort-grip {
    display: block;
    width: 100%;
    height: 461px;
  }

  .grip {
    width: 24%;
    height: 82.5%;
    bottom: 7.5%;
    left: 0%;
    transform: rotate(12deg);
    background: 
      radial-gradient(50% 100% at 69% 50%, #fff1, #fff0 50%),
      radial-gradient(100% 100% at 60% 60%, #ffffff18, #fff0 30%),
      linear-gradient(#0000, #0003),
      #2f3638;
    border-radius: 120% 120% 170% 125% / 120% 120% 140% 110%;
    transform-origin: 50% 100%;
    box-shadow:
      inset 25px 20px 20px -10px #00050ccc,
      inset -20px -10px 30px -10px #0008,
      inset 32px 50px 15px -15px #fff5,
      inset 0 0 50px #0008;
  }

  .grip.right {
    left: auto;
    right: 0;
    transform: scaleX(-1) rotate(12deg);
  }

  .comfort-grip ~ .comfort-grip {
    height: 100%;
  }

  .holder {
    width: 70%;
    height: 365px;
    background: #2f3638;
   .........完整代码请登录后点击上方下载按钮下载查看