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

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

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