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