首页 > 编程开发 > CSS

CSS3 实现NES游戏机的示例代码

来自：网络
时间：2021-04-21
阅读：

实现效果

CSS3 实现NES游戏机的示例代码

实现代码

html

<input type="radio" name="nes-size" id="size1">
<label for="size1" class="size1" ></label>
<input type="radio" name="nes-size" id="size2">
<label for="size2" class="size2"></label>
<input type="radio" name="nes-size" id="size3" checked>
<label for="size3" class="size3"></label>
<input type="radio" name="nes-size" id="size4">
<label for="size4" class="size4"></label>

<div id="nes">
  <div class="nes-top"> 
    <div class="lid">
            <h1>Nintendo</h1>
            <h2>ENTERTAINMENT SYSTEM</h2>
        </div>
        <div class="cartridge-slot">
          <div class="cartridge-slot-border">          
          </div>
          <div class="cartridge-slot-hole"></div>
        </div>
   </div>
  <div class="nes-bottom">
    <div class="power-box">
      <input type="checkbox" id="power" />
      <div class="reset"></div>
      <label for="power" class="power"></label>     
      <div class="light"></div>
     
    </div>
  </div>
  <div class="gamepads-slots">
    <div class="gamepad-slot p1"></div>
    <div class="gamepad-slot p2"></div>
  </div>
</div>

css3

@import url(https://fonts.googleapis.com/css?family=Coda+Caption:800);
body {
background: #DB5A48;
}
#size1, #size2, #size3, #size4 {
position: absolute;
left: -9999px;
}
input:checked + .size1, input:checked + .size2, input:checked + .size3, input:checked + .size4 {
box-shadow: inset 2px 3px 0px rgba(0, 0, 0, 0.34),inset -1px -1px 0px rgba(255, 255, 255, 0.22);
background: #7A7077;
}
.size1 {
position: absolute;
width: 20px;
height: 20px;
background: #CDC8C5;
left: 60px;
top: 60px;
border-radius: 50%;
}
.size2 {
position: absolute;
width: 40px;
height: 40px;
background: #CDC8C5;
left: 90px;
top: 50px;
border-radius: 50%;
}
.size3 {
position: absolute;
width: 60px;
height: 60px;
background: #CDC8C5;
left: 140px;
top: 40px;
border-radius: 50%;
}
.size4 {
position: absolute;
width: 80px;
height: 80px;
background: #CDC8C5;
left: 220px;
top: 30px;
border-radius: 50%;
}
#size1:checked ~ #nes{
  font-size:8px
}
#size2:checked ~ #nes{
  font-size:12px
}
#size3:checked ~ #nes{
  font-size:16px
}
#size4:checked ~ #nes{
  font-size:20px
}
#nes {
	width: 45em;
	height: 15em;
	margin: 140px auto;
	position: relative;
	color: #B62F28;
	font-family: 'Coda Caption', sans-serif;
  -webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-ms-transition: all 0.1s;
transition: all 0.1s;
}

#nes:after {
	content: "";
	position: absolute;
	width: 80%;
	height: 0;

	-webkit-box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22);
	box-shadow: 0 0 5em 3em rgba(0, 0, 0, 0.22);
	bottom: -4%;
	left: 10%;
	z-index: -1;
	border-radius: 50%;
}

#nes:before {
	content: "";
	position: absolute;
	width: 99.4%;
	height: 0;
	top: -3%;
	left: 0.3%;
	border-bottom: 0.5em solid #C9C4C1;
	border-left: 2em solid rgba(0, 0, 0, 0);
	border-right: 2em solid rgba(0, 0, 0, 0);

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.nes-top {
	position: absolute;
	top: 0;
	left0;
	 width: 45em;
	height: 7.4em;
	background: #cdc8c5;
	border-radius: 0.3em 0.3em 0 0;

	-webkit-box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353;
	box-shadow: 0 0.1em 0em #B8B4B2,0 0.5em 0em -0.2em #535353;
	border-top: 0.2em solid rgba(255, 255, 255, 0.32);
	border-left: 0.2em solid rgba(255, 255, 255, 0.32);
	border-right: 0.2em solid rgba(0, 0, 0, 0.05);

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

h1 {
	font-size: 1.5em;
	position: absolute;
	top: 0.4em;
	left: 0.85em;
}

.lid h2 {
	font-size: 0.6em;
	position: absolute;
	top: 5.1em;
	left: 2.2em;
}

.lid {
	z-index: 1;
	width: 25em;
	height: 6em;
	background: #CDC8C5;
	position: absolute;
	left: 5em;

	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-perspective: 0;

	-webkit-transform-origin:0 0 -6em;
-moz-transform-origin:0 0 -6em;
-o-transform-origin:0 0 -6em;
-ms-transform-origin:0 0 -6em;
transform-origin:0 0 -6em;


	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-top: 0.2em solid rgba(255, 255, 255, 0.32);
	top: -0.2em;

	-webkit-box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41);
	box-shadow: 0 0.1em 0.2em 0 rgba(0, 0, 0, 0.41);
	border-right: 0.1em solid rgba(255, 255, 255, 0.26);
	border-bottom: 0.1em solid rgba(255, 255, 255, 0.26);
	border-radius: 0.15em;
}

.lid:before {
content: "";
position: absolute;
width: 20%;
left: 40%;
height: 0.2em;
bottom: 0;
background: #E7E7E7;
background: #CDC8C5;
background: -moz-linear-gradient(top, rgba(205, 200, 197, 1) 0%, rgba(231, 231, 231, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(205, 200, 197, 1)), color-stop(100%,rgba(231, 231, 231, 1)));
background: -webkit-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
background: -o-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
background: -ms-linear-gradient(top, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
background: linear-gradient(to bottom, rgba(205, 200, 197, 1) 0%,rgba(231, 231, 231, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdc8c5', endColorstr='#e7e7e7',GradientType=0 );
box-shadow: 0.2em 0.05em 0.3em -0.1em rgba(0, 0, 0, 0.3);
}
.nes-top:hover .lid {
	-webkit-transform: rotateX(55deg);
	-moz-transform: rotateX(55deg);
	-o-transform: rotateX(55deg);
	-ms-transform: rotateX(55deg);
	transform: rotateX(55deg);


	-webkit-box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32);
	box-shadow: 0 3.1em 5.2em -2em rgba(0, 0, 0, 0.32);
}

.nes-top:before {
content: "";
position: absolute;
border-right: 0.8em solid #B8B8B8;
top: -0.22em;
left: 4.8em;
border-top: 0.3em solid rgba(0, 0, 0, 0);
z-index: 1;
}
.nes-top:after {
content: "";
position: absolute;
border-left: 0.8em solid #B8B8B8;
top: -0.22em;
left: 29.4em;
border-top: 0.3em solid rgba(0, 0, 0, 0);
}
.lid:after {
	content: "";
	width: 23.9em;
	height: 6.1em;
	background: #CDC8C5;
	position: absolute;
	left: 0.45em;
	top: -6em;

	-webkit-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
	-moz-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
	-o-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
	-ms-transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
	transform: rotateX(90deg) translateY(-3em) translateZ(-3em);
}

.nes-bottom {
width: 39em;
height: 7.5em;
background: #7A7077;
position: absolute;
bottom: 0;
left: 3em;
border-bottom: 0.2em solid rgba(255, 255, 255, 0.1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45);
box-shadow: 0 0.6em 1em -0.3em rgba(0, 0, 0, 0.45);
}

.nes-bottom:after {
	border-bottom: 6em solid transparent;
	border-left: 3em solid #7A7077;
	content: "";
	height: 1.5em;
	position: absolute;
	right: -3em;
	top: 0;
}

.nes-bottom:before {
	border-bottom: 6em solid transparent;
	border-right: 3em solid #7A7077;
	content: "";
	height: 1.5em;
	position: absolute;
	left: -3em;
	top: 0;
}

.power-box {
	position: absolute;
	left: 1.4em;
	width: 11.5em;
	top: 0;
	height: 5.8em;
	border: 0.1em solid rgba(0, 0, 0, 0.05);
	border-top: 0;
	border-radius: 0.3em;
	border-top-right-radius: 0;
	border-right: 0.1em solid rgba(255, 255, 255, 0.05);

	-webkit-box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
	box-shadow: 0 0.1em 0 0em rgba(0, 0, 0, 0.01);
	color: #AC2828;
}

.light {
	position: absolute;
	width: 0.6em;
	height: 0.6em;
	left: 0.6em;
	bottom: 1.3em;
	background-color: #504F4F;

	background-image: -webkit-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -webkit-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
	background-image: -moz-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -moz-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
	background-image: -o-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -o-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
	background-image: -ms-linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), -ms-linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
	background-image: linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );

	-webkit-background-size: 0.2em 0.2em;
	-moz-background-size: 0.2em 0.2em;
	background-size: 0.2em 0.2em;

	-webkit-box-shadow: -0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
	box-shadow: -0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);

	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}

#power:checked ~ .light {
	background-image: -webkit-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -webkit-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
	background-image: -moz-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -moz-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
	background-image: -o-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -o-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
	background-image: -ms-linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), -ms-linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );
	background-image: linear-gradient(45deg, #FFF 25%, #FFF 25%, #FFF 75%, #FFF 75%, #FFF ), linear-gradient(-45deg, #FFF 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #FFF 75%, #FFF );

	-webkit-box-shadow: inset 0 0 0.5em 0.2em #F1270B,0 0 0.5em #F1550B,-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0.5em 0.2em #F1270B,0 0 0.5em #F1550B,-0.1em -0.1em 0.1em rgba(0, 0, 0, 0.3),0.1em 0.1em 0.1em rgba(255, 255, 255, 0.1);
}

#power:checked + .reset:active ~ .light, #power:checked + .reset:focus ~ .light {
background-color: rgba(255, 255, 255, 0.06);
background-image: linear-gradient(45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D ), linear-gradient(-45deg, #3D3D3D 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, #3D3D3D 75%, #3D3D3D );
box-shadow: none;
}
#power {
	position: absolute;
	left: -9999px;
}

.power,.reset {
	position: absolute;
	cursor: pointer;
	width: 6em;
	line-height: 3.8em;
	height: 2.8em;
	left: 3em;
	top: 5em;
	font-size: 0.6em;
	border-top: 0.5em solid rgba(0, 0, 0, 0.09);
	border-right: 0.5em solid rgba(0, 0, 0, 0.03);
	border-bottom: 0.5em solid rgba(255, 255, 255, 0.1);
	border-left: 0.5em solid rgba(255, 255, 255, 0.04);
	border-radius: 0.6em;
}

.reset {
	left: 11em;
	top: 5em;
}

.power:before,.reset:before {
	content: "POWER";
	position: absolute;
	width: 94%;
	height: 95%;
	left: 3%;
	top: 10%;
	text-align: center;
	border-radius: 0.3em;
	border-top: 0.3em solid rgba(255, 255, 255, 0.09);
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
	background: #7A7077;

	-webkit-box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69);
	box-shadow: 0 -0.4em 0 #665E64,0 0.2em 1em -0.3em rgba(0, 0, 0, 0.69);

	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	-o-transition: all 0.1s;
	-ms-transition: all 0.1s;
	transition: all 0.1s;
}

.reset:before {
	content: "RESET";
}

.power:hover:before,.reset:hover:before,#power:checked + .power:before {
	top: 0;

	-webkit-box-shadow: 0 -0.2em 0 #665E64,0 0.2em 0.6em -0.3em rgba(0, 0, 0, 0.69);
	box-shadow: 0 -0.2em 0 #665E64,0 0.2em 0.6em -0.3em rgba(0, 0, 0, 0.69);
}

.power:focus:before,.power:active:before,.reset:focus:before,.reset:active:before {
	top: -0.1em;

	-webkit-box-shadow: 0 -0.1em 0 #665E64,0 0.1em 0.6em -0.3em rgba(0, 0, 0, 0.69), inset 0 0.2em 1em rgba(0, 0, 0, 0.07);
	box-shadow: 0 -0.1em 0 #665E64,0 0.1em 0.6em -0.3em rgba(0, 0, 0, 0.69), inset 0 0.2em 1em rgba(0, 0, 0, 0.07);
	border: none;
}

.cartridge-slot {
	width: 25em;
	height: 5.9em;
	position: absolute;
	left: 4.8em;
	border-right: 0.2em solid rgba(0, 0, 0, 0.06);
	border-bottom: 0.2em solid rgba(255, 255, 255, 0.28);
	border-left: 0.2em solid rgba(0, 0, 0, 0.12);
	border-radius: 0 0 0.5em 0.5em;
	overflow: hidden;
}

.cartridge-slot:before {
	position: absolute;
	height: 88%;
	content: "";
	width: 95.5%;
	left: -6%;
	top: 0;
	border-bottom: 3em solid rgba(0, 0, 0, 0.04);
	border-right: 2em solid rgba(0, 0, 0, 0.1);
	border-left: 2em solid rgba(0, 0, 0, 0.1);
}

.gamepads-slots {
	height: 100%;
	position: absolute;
	width: 19%;
	right: 13%;
	background: #333;
	border-top: 0.2em solid rgba(255, 255, 255, 0.15);
	border-bottom: 0.2em solid rgba(255, 255, 255, 0.1);

	-webkit-box-shadow: inset -0.2em 0 0 rgba(0, 0, 0, 0.1),inset 0.2em 0 0 rgba(0, 0, 0, 0.1),-0.2em 0 0 rgba(0, 0, 0, 0.2), 0.2em 0 0 rgba(0, 0, 0, 0.2), -0.25em 0 0 rgba(255, 255, 255, 0.10), 0.25em 0 0 rgba(255, 255, 255, 0.1), inset 0 -1.90em 0 #333, inset 0 -1.95em 0 rgba(255, 255, 255, 0.09), inset 0 -2em 0 rgba(0, 0, 0, 0.16), inset 0 -6.45em 0 #333, inset 0 -6.55em 0 rgba(0, 0, 0, 0.4), inset 0 -6.6em 0 rgba(255, 255, 255, 0.05), inset 0 -7.35em 0 #333, inset 0 -7.4em 0 rgba(255, 255, 255, 0.09), inset 0 -7.45em 0 rgba(0, 0, 0, 0.16), inset 0 -8.7em 0 #333, inset 0 -8.75em 0 rgba(0, 0, 0, 0.4), inset 0 -8.85em 0 rgba(255, 255, 255, 0.05), inset 0 1.3em 0 #333, inset 0 1.35em 0 rgba(0, 0, 0, 0.4), inset 0 1.4em 0 rgba(255, 255, 255, 0.08);
	box-shadow: inset -0.2em 0 0 rgba(0, 0, 0, 0.1),inset 0.2em 0 0 rgba(0, 0, 0, 0.1),-0.2em 0 0 rgba(0, 0, 0, 0.2), 0.2em 0 0 rgba(0, 0, 0, 0.2), -0.25em 0 0 rgba(255, 255, 255, 0.10), 0.25em 0 0 rgba(255, 255, 255, 0.1), inset 0 -1.90em 0 #333, inset 0 -1.95em 0 rgba(255, 255, 255, 0.09), inset 0 -2em 0 rgba(0, 0, 0, 0.16), inset 0 -6.45em 0 #333, inset 0 -6.55em 0 rgba(0, 0, 0, 0.4), inset 0 -6.6em 0 rgba(255, 255, 255, 0.05), inset 0 -7.35em 0 #333, inset 0 -7.4em 0 rgba(255, 255, 255, 0.09), inset 0 -7.45em 0 rgba(0, 0, 0, 0.16), inset 0 -8.7em 0 #333, inset 0 -8.75em 0 rgba(0, 0, 0, 0.4), inset 0 -8.85em 0 rgba(255, 255, 255, 0.05), inset 0 1.3em 0 #333, inset 0 1.35em 0 rgba(0, 0, 0, 0.4), inset 0 1.4em 0 rgba(255, 255, 255, 0.08);

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.cartridge-slot:after {
position: absolute;
width: 97%;
left: 1.2%;
height: 0.5em;
background: #CDC8C5;
bottom: 8%;
content: "";
}
.cartridge-slot-border {
position: absolute;
width: 95.5%;
left: 2%;
height: 0.4em;
background: #BEBABA;
bottom: 15%;
}
.cartridge-slot-border:before {
content: "";
position: absolute;
border-right: 0.2em solid #BEBABA;
top: 0em;
left: -0.2em;
border-top: 0.4em solid rgba(0, 0, 0, 0);
z-index: 1;
}
.cartridge-slot-border:after {
content: "";
position: absolute;
border-left: 0.2em solid #BEBABA;
top: 0em;
right: -0.2em;
border-top: 0.4em solid rgba(0, 0, 0, 0);
z-index: 1;
}
.gamepads-slots:before {
	content: "";
	position: absolute;
	width: 99.4%;
	height: 2%;
	top: -3.2%;
	left: -3.7%;
	background: #333;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transform: skew(72deg);
	-moz-transform: skew(72deg);
	-o-transform: skew(72deg);
	-ms-transform: skew(72deg);
	transform: skew(72deg);
}

.gamepad-slot {
	position: absolute;
	bottom: 2.15em;
	width: 3em;
	left: 0.8em;
	height: 4em;
	border-radius: 0.6em;
	background: #303030;
	border-top: 0.1em solid rgba(255, 255, 255, 0.09);
	border-bottom: 0.1em solid #000;

	-webkit-box-shadow: 0 -0.1em 0 0.1em rgba(255, 255, 255, 0),0 -0.1em 0em 0.1em rgba(0, 0, 0, 0.19);
	box-shadow: 0 -0.1em 0 0.1em rgba(255, 255, 255, 0),0 -0.1em 0em 0.1em rgba(0, 0, 0, 0.19);
}

.p2 {
	right: 0.8em;
	left: inherit;
}

.gamepad-slot:after {
	content: "";
	position: absolute;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	left: 0.8em;
	top: 0.7em;

-webkit-box-shadow: 
	inset 0 0 0 0.2em #1A1A1A, 
	0 0 0 0em #000, 
	0 0.70em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0 0.73em 0 #1A1A1A, 
	0 0.73em 0 #000, 
	0.70em 0.70em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0.70em 0.73em 0 #1A1A1A, 
	0.70em 0.73em 0 #000, 
	0 1.40em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0 1.43em 0 #1A1A1A, 
	0 1.43em 0 #000, 
	0.70em 1.40em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0.70em 1.43em 0 #1A1A1A, 
	0.70em 1.43em 0 #000, 
	0 2.10em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0 2.10em 0 #1A1A1A, 
	0 2.10em 0 #000, 
	0.70em 2.10em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0.70em 2.10em 0 #1A1A1A, 
	0.70em 2.10em 0 #000;
box-shadow: 
	inset 0 0 0 0.2em #1A1A1A, 
	0 0 0 0em #000, 
	0 0.70em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0 0.73em 0 #1A1A1A, 
	0 0.73em 0 #000, 
	0.70em 0.70em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0.70em 0.73em 0 #1A1A1A, 
	0.70em 0.73em 0 #000, 
	0 1.40em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0 1.43em 0 #1A1A1A, 
	0 1.43em 0 #000, 
	0.70em 1.40em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0.70em 1.43em 0 #1A1A1A, 
	0.70em 1.43em 0 #000, 
	0 2.10em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0 2.10em 0 #1A1A1A, 
	0 2.10em 0 #000, 
	0.70em 2.10em 0 -0.2em rgba(255, 255, 255, 0.22), 
	0.70em 2.10em 0 #1A1A1A, 
	0.70em 2.10em 0 #000;

}

.gamepads-slots:after {
	content: "1 2";
	position: absolute;
	top: 12em;
	left: 3.6em;
	font-size: 0.6em;
	word-spacing: 5.7em;
	color: #8B1A1A;
}
.cartridge-slot-hole {
width: 82%;
height: 75%;
background: #423F3F;
position: absolute;
left: 8.6%;
top: 5%;
border-radius: 0.2em;
border-left: 0.1em solid rgba(255, 255, 255, 0.88);
border-right: 0.1em solid rgba(255, 255, 255, 0.88);
box-shadow: inset 0 2em 3em #000, inset 0 -0.4em 0 #424242, inset 0 -1.2em 0 #222;
}
.cartridge-slot-hole:before {
content: "";
position: absolute;
width: 92%;
left: 4%;
height: 2em;
bottom: 1.15em;
background: #141414;
background: -moz-linear-gradient(left, rgba(20, 20, 20, 1) 0%, rgba(5, 5, 5, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(20, 20, 20, 1)), color-stop(100%,rgba(5, 5, 5, 1)));
background: -webkit-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
background: -o-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
background: -ms-linear-gradient(left, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%,rgba(5, 5, 5, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#050505',GradientType=1 );
}
.cartridge-slot-hole:after {
content: "";
position: absolute;
width: 0.2em;
height: 0.1em;
left: 1.8em;
top: 33%;
background: #3C3C3C;
color: #3C3C3C;
box-shadow: 0.4em 0 0, 0.8em 0 0, 1.2em 0 0, 1.6em 0 0, 2em 0 0, 2.4em 0 0, 2.8em 0 0, 3.2em 0 0, 3.6em 0 0, 4em 0 0, 4.4em 0 0, 4.8em 0 0, 5.2em 0 0, 5.6em 0 0, 6em 0 0, 6.4em 0 0, 6.8em 0 0, 7.2em 0 0, 7.6em 0 0, 8em 0 0, 8.4em 0 0, 8.8em 0 0, 9.2em 0 0, 9.6em 0 0, 10em 0 0, 10.4em 0 0, 10.8em 0 0, 11.2em 0 0, 11.6em 0 0, 12em 0 0, 12.4em 0 0, 12.8em 0 0, 13.2em 0 0, 13.6em 0 0, 14em 0 0, 14.4em 0 0, 14.8em 0 0, 15.2em 0 0, 15.6em 0 0, 16em 0 0, 16.4em 0 0;
}
.gamepad-slot:before {
content: "";
position: absolute;
width: 72%;
left: 14%;
height: 86%;
top: 7%;
border: 0.35em solid rgba(0, 0, 0, 0.53);
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 1em 80% 0.8em 0.8em / 1em 61% 0.8em 0.8em;
box-shadow: -0.1em 0 0 rgba(255, 255, 255, 0.02),inset 0.1em 0 0 rgba(255, 255, 255, 0.03),inset -0.1em 0.1em 0 rgba(255, 255, 255, 0.11);
}

以上就是CSS3 实现NES游戏机的示例代码的详细内容，更多关于CSS3 实现NES游戏机的资料请关注其它相关文章！

最新文章 相关文章

CSS3 伪元素与伪类选择器区别与应用实例详解

伪元素与伪类两者都是通过在选择器后附加一个特定的关键字来定义，遵循相似的语法规则，并在 CSS 规则块中设置相应的样式。伪元素 能够通过 content 属性添加或替换内容。例如，:

2024-10-18 23:21:01

如何保持CSS3动画结束状态不变

引言CSS3动画为网页设计带来了丰富的动态效果，使得页面更加生动和吸引人。然而，有时我们希望动画在结束时保持最终状态，而不是回到初始状态。本文将介绍几种方法来实现这一效果

2024-10-18 23:20:50

CSS3 新特性 box-shadow 阴影效果、圆角border-radius效果实现

圆角使用CSS3 border-radius属性，你可以给任何元素制作"圆角"，border-radius属性，可以使用以下规则：
（1）四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下

2024-10-18 23:20:40

CSS3中的@media查询常见问题

CSS3的@media查询是一种强大的功能，允许我们根据不同的媒体类型和设备特性来应用不同的样式规则。这使得我们能够创建响应式设计，确保网站或应用在各种设备和屏幕尺寸上都能提

2024-10-18 23:20:28

CSS盒子模型、圆角边框、盒子阴影效果实现

页面布局的三大核心：盒子模型、浮动、定位。盒子模型、圆角边框盒子模型网页布局的核心：通过css摆放盒子。
盒子模型的组成包括：边框、外边距、内边距、实际内容padding：默认顶

2024-10-18 23:20:18

如何利用CSS实现视差滚动和抖动效果

背景： 前端的设计效果，越来越炫酷，而这些炫酷的效果，利用css3的动画效果和js就可以实现，简单的代码就能实现非常炫酷的效果。
原理： 利用 js监控scrollTop的位置，通过 top定位图片

2024-10-14 19:53:57

css边框修饰实现代码

一、设置线条样式通过 border-style 属性设置，可选择的一些属性如下： dotted：点线 dashed：虚线 solid：实线 double：双实线效果如下：二、设置边框线宽度① 通过 border-width 整体设

2024-10-14 19:53:45

CSS的:required和:optional伪类：如何增强表单字段的视觉识别

在网页设计中，表单是用户与网站交互的重要元素之一。为了提升用户体验并引导用户正确填写表单，开发者需要清晰地标识出哪些字段是必填的，哪些是可选的。CSS提供了两个非常有用

2024-10-14 19:53:31

CSS图片铺满div的实现方法

第一种结构：图片是子元素<div> <img src="引入图片地址" alt="" class="Img"></div>方法一：img元素添加 object-fit:coverdiv{　　width: 500px;　　height: 500px;}.I

2024-10-14 19:53:22

css实现四角边框效果

css实现四角边框 html： <div class="box" v-for="(item, index) in coldBaseInfo.stationModelList" :key="index" >

2024-10-14 19:53:13

CSS 中的overscroll-behavior属性详解

overscroll-behavior 是 CSS 中的一个属性，它用于控制元素在发生滚动时，当滚动范围超出其边界时的行为。这个属性对于改善用户体验特别有用，尤其是在移动端设备上，当用户尝试滚

2024-10-14 19:53:04

CSS使用filter和backdrop-filter实现高斯模糊效果(示例代码)

背景今天接到一个需求是，使用高斯模糊的效果对一个页面进行模糊处理，正好借这个机会来整理一下 css3 中高斯模糊的两个 APIAPI介绍filter说明：
该 API 是一个过滤器，不仅能实现

2024-10-14 19:52:56

【现代 CSS】标准滚动条控制规范 scrollbar-color 和 scrollbar-width

Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。要知道，在此前，虽然有 ::-webkit-scrollbar 规范可以控制滚动条，可是，::-web

2024-06-12 11:45:42

CSS之定位Position

前言之前在《CSS之浮动》中，我当时是想一起说说定位的，因为我在很多地方看到有把float和position放在一起讲的，说它们的一些属性值可以使元素脱离文档流，但是没想到在准备内容的

2024-04-23 21:53:56

三种方式使用纯 CSS 实现星级评分

本文介绍三种使用纯 CSS 实现星级评分的方式。每种都值得细品一番~五角星取自 Element Plus 的 svg 资源<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"

2024-03-15 00:54:05

现代 CSS 解决方案：accent-color 强调色

accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属

2024-02-27 16:07:16

CSS布局技巧：实现全屏背景图片的最佳实践

在网页设计中，全屏背景图片是一种常见的技巧，可以为网页增添视觉上的冲击力和吸引力。在CSS中，有几种方法可以实现全屏背景图片，本文将介绍其中的最佳实践，并提供具体的代码示例

2024-01-24 21:14:41

CSS 列表属性优化技巧：list-style-type 和 list-style-position

在网页设计中，列表是一个常见且重要的元素。通过使用 CSS 列表属性，我们可以对列表的样式和位置进行优化，以提升用户体验。本文将重点介绍两个列表属性：list-style-type 和 list

2024-01-24 21:14:24

CSS实现无缝滚动效果的技巧和方法

随着互联网技术的发展，无缝滚动效果在网页设计中被广泛应用。它可以给用户带来更好的浏览体验，也能增加网页的动感和视觉效果。在本文中，我将介绍几种常用的CSS实现无缝滚动效

2024-01-24 21:13:57

利用CSS实现鼠标悬停时的弹出特效的技巧和方法

在网页的设计中，常常会遇到鼠标悬停时需要弹出特效的需求，这一特效能够提升用户体验和页面交互性。本文将介绍利用CSS实现鼠标悬停时的弹出特效的技巧和方法，并提供具体的代码

2024-01-24 21:13:39

CSS 3D 变换属性：transform 和 perspective

CSS 3D 变换属性是一种强大的技术，可以通过一些简单的代码实现令人惊叹的视觉效果。其中，最常用的两个属性是 transform 和 perspective。一、transform 属性transform 属性用

2024-01-24 21:13:18

如何使用CSS制作旋转动画的实现步骤

在现代网页设计中，动画效果是非常重要和受欢迎的一个元素。其中，旋转动画可以给网页注入活力和吸引力。本文将介绍如何使用CSS制作旋转动画的具体步骤，并提供一些代码示例。步

2024-01-24 21:13:01

CSS 变形属性优化技巧：transform 和 transition

引言：
随着Web前端技术的不断发展，CSS的应用变得愈发广泛，其中包括对元素的变形和动画效果的实现。CSS的transform和transition属性提供了一种简便有效的方式来实现元素的变形

2024-01-24 21:12:44

CSS 字间距属性指南：letter-spacing 和 word-spacing

CSS （层叠样式表）是一种用于描述网页上元素外观和样式的标记语言。在CSS中，有一些属性可以帮助我们调整字间距，使文本更易于阅读和美观。本文将详细介绍两个常用的字间距属性：let

2024-01-24 21:12:28

CSS 选择器属性进阶：伪类和伪元素

引言：
在CSS中，选择器是一个重要的概念，它能够帮助开发者准确地选择DOM元素并应用样式。除了常见的元素选择器（如标签选择器和类选择器）之外，CSS还提供了伪类和伪元素这两个选择器

2024-01-24 21:12:10

CSS布局指南：实现网格布局的最佳实践

引言：
在现代网页设计中，网格布局已经成为一种非常流行的布局方式。它可以帮助我们更好地组织页面结构，使其更具有层次感和可读性。本篇文章将介绍网格布局的最佳实践，以及具体

2024-01-24 21:11:54

CSS 相对布局属性详解：position 和 relative

在前端开发中，布局常常是开发者需要面对的问题，为了更好地控制元素在页面中的位置，CSS 提供了多种布局方式。其中，相对布局是一种非常常用的布局方式，通过使用 position 和 relat

2024-01-24 21:11:38

CSS布局教程：实现圆形布局的最佳方法

在网页设计中，常常需要实现一些独特的布局效果来吸引用户的注意力。其中，圆形布局是一种非常常见且有趣的布局效果，可以用来展示图片、图标或者其他内容。本文将介绍实现圆形布

2024-01-24 21:11:20

CSS 外边距属性指南：margin-top，margin-right，margin-bottom 和 margin-left

引言：
在 CSS 中，外边距（margin）是定位元素与其周围元素之间的间距，可以用来控制元素与其他元素的距离，给网页设计带来更多的灵活性和美观性。本文将详细介绍 CSS 外边距的四个属

2024-01-24 21:11:04

如何使用CSS制作倒计时效果的实现步骤

倒计时效果是网页开发中常见的一个功能，可以为用户呈现倒计时的动态效果，给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果，并给出详细的实现步骤和代码示例。实

2024-01-24 21:10:47

热点内容

各浏览器CSS HACK
2018-08-19
详解如何修改el-select的样式：popper-append-to-body和popper-class
2020-10-16
css左边距怎么设置？
2019-11-10
各种字体显示效果
2018-08-13
CSS html文字的跑马灯(流光)特效
2019-10-05
css如何让padding不占宽度？
2020-10-14
调整input里面的输入光标大小
2018-08-14
Bootstrap 4设置响应式字体大小
2020-03-21
css中a标签不显示下划线怎么设置？
2019-11-10
Css3中text-shadow属性使用方法及各参数所代表的含义
2019-09-18
返回顶部
顶部