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

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

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