div+css布局实现gameboy便携游戏机代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现gameboy便携游戏机代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@700&display=swap');

:root{
  --size: 210px;
  --primary-color: #FFB400;
  --secondary-color: #FFBF00;
  --tertiary-color: #FF7900;
  --quaternary-color: #FFA100;
  --quinary-color:#FF9100;
  --sextarian-color:#843907;
}

html,body,.container{
  margin:0;
  padding:0;
  height:100vh;
}

body{
  background:#998E84;
}

.container{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:48px;
  align-items:center;
  justify-content:center;
  transform:scale(0.9);

}

.console-container{
  display:grid;
  height:422px;
  width:var(--size);
  border-radius:24px;
  box-shadow: 20px 20px 0px #0002;
}

.original{
  display:grid;
  margin:0;
  padding:0;
  height:48px;
  width:156px;
  background:#FFB400;
  align-items:center;
  justify-content:center;
  justify-self:center;
  font-family:Jost,sans-serif;
  font-weight:bold;
  font-size:20px;
  text-decoration:none;
  color: #4F3825;
  border-radius:8px;
  transition: all .3s ease-in-out;
  box-shadow:
    0px 8px 0px #FF7900,
    8px 16px 0px #0002;
  transform:translate(0px,-8px);
}

.original:hover{
  transform:translate(0px,4px);
  box-shadow:
    0px 4px 0px #FF7900,
    6px 10px 0px #0002;
}


/*-------------------------------*/

.console-top{
  display:grid;
  justify-content:center;
  height:190px;
  width:var(--size);
  background:var(--primary-color);
  border-radius:24px 24px 0px 0px;
  box-shadow:0px 6px 1px 0px #FFD100 inset;
}

.dot-container{
  display:grid;
  grid-template-columns:repeat(2,166px);
  grid-template-rows:repeat(4,160px);
  height:170px;
  width:176px;
  transform:translate(0px,14px);
}

.dot{
  display:grid;
  height:10px;
  width:10px;
  background:var(--tertiary-color);
  border-radius:50%;
}

.screen-container{
  display:grid;
  align-items:center;
  justify-content:center;
  height:135px;
  width:176px;
  background:#281609;
  transform:translate(0px,-140px);
  border-radius:12px;
}

.screen{
  display:grid;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  height:100px;
  width:150px;
  background:#3A2412;
}

.reflection{
  display:grid;
  height:13px;
  width:132px;
  background:#fff1;
  transform:rotate(-45deg) translate(-18px,-44px);
 box-shadow: 
   18px 50px 0px 24px #fff1,
   20px 105px 0px 0px #fff1;
}

/*-------------------------------*/

.console-mid{
  display:grid;
  grid-template-columns:repeat(4,48px);
  height:24px;
  width:var(--size);
}

.first-hinge{
  display:grid;
  height:24px;
  width:48px;
}

.first-rectangle{
  display:grid;
  height:24px;
  width:48px;
  background:var(--tertiary-color);
}

.first-rectangle:nth-child(2){
  display:grid;
  height:12px;
  width:6px;
  background:var(--quaternary-color);
  transform:translate(4px,-24px);
}

.first-rectangle:nth-child(3){
  height:24px;
  width:22px;
  background:var(--secondary-color);
  transform:translate(15px,-36px);
}

.first-rectangle:nth-child(4){
  height:12px;
  width:15px;
  background:var(--quaternary-color);
  transform:translate(15px,-48px);
}

.first-rectangle:nth-child(5){
  height:24px;
  width:6px;
  background:var(--secondary-color);
  transform:translate(42px,-72px);
}

/*---*/

.second-hinge{
  display:grid;
  height:24px;
  width:50px;
}

.second-rectangle{
  display:grid;
  height:12px;
  width:50px;
  background:var(--quaternary-color);
}

.second-rectangle:nth-child(2){
  background:var(--tertiary-color);
}

/*---*/

.third-hinge{
  display:grid;
  height:24px;
  width:92px;
  transform:translate(2px,0px);
}

.third-rectangle{
  display:grid;
  height:24px;
  width:92px;
  background:var(--secondary-color);
}

.third-rectangle:nth-child(2){
  height:24px;
  width:6px;
  background:var(--tertiary-color);
  transform:translate(6px,-24px);
}

.third-rectangle:nth-child(3){
  height:12px;
  width:72px;
  background:var(--quaternary-color);
  transform:translate(12px,-36px);
}

/*---*/

.fourth-hinge{
  display:grid;
  height:24px;
  width:23px;
  transform:translate(43px,0px);
}

.fourth-rectangle{
  display:grid;
  height:24px;
  width:23px;
  background:var(--tertiary-color);
}

.fourth-rectangle:nth-child(2){
  display:grid;
  height:12px;
  width:8px;
  background:var(--quaternary-color);
  transform:translate(4px,-24px);
}

.fourth-rectangle:nth-child(3){
  height:24px;
  width:5px;
  background:var(--secondary-color);
  transform:translate(12px,-36px);
}

/*-------------------------------*/

.console-bottom{
  display:grid;
  align-items:center;
  justify-content:center;
  z-index:1;
  height:186px;
  width:var(--size);
  background:var(--primary-color);
  border-radius:0px 0px 24px 24px;
  box-shadow:
    0px 10px 1px 0px #FFAC00 inset,
    0px -6px 0px #FFD100 inset;
    ;
}

.top-circle{
  display:grid;
  justify-self:center;
  height:14px;
  width:14px;
  border-radius:50%;
  background:var(--quinary-color);
  transform:translate(0px,12px);
}

.hole-container{
  display:grid;
  align-content:space-between;
  height:19px;
  width:12px;
  transform:translate(81px,35px);
}

.hole{
  display:grid;
  height:8px;
  width:12px;
  background:var(--sextarian-color);
  transform:translate(100px,-50px);
}

.gamepad-container{
  display:grid;
  grid-template-columns:repeat(2,99px);
  height:74px;
  width:176px;
  transform:translate(0px,-13px);
}

.pad-container{
  display:grid;
  align-items:center;
  justify-content:center;
  height:74px;
  width:74px;
  background:var(--quinary-color);
  border-radius:50%;
  .........完整代码请登录后点击上方下载按钮下载查看