javascript编写的小游戏（CSS3 实现NES游戏机的示例代码）
时间：2021-10-27 10:28:22 类别：Web前端 浏览量：716
javascript编写的小游戏
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>
<li id="nes">
<li class="nes-top">
<li class="lid">
<h1>Nintendo</h1>
<h2>ENTERTAINMENT SYSTEM</h2>
</li>
<li class="cartridge-slot">
<li class="cartridge-slot-border">
</li>
<li class="cartridge-slot-hole"></li>
</li>
</li>
<li class="nes-bottom">
<li class="power-box">
<input type="checkbox" id="power" />
<li class="reset"></li>
<label for="power" class="power"></label>
<li class="light"></li>
</li>
</li>
<li class="gamepads-slots">
<li class="gamepad-slot p1"></li>
<li class="gamepad-slot p2"></li>
</li>
</li>
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弹性布局（CSS3弹性布局内容对齐justify-content属性使用详解）
- css3动画时间（css3实现的天气图标动画效果）
- 制作css3动画应使用哪个样式属性（CSS3中Transform动画属性用法详解）
- css3导航菜单（CSS3实现的侧滑菜单）
- css3支持多重背景吗（真正了解CSS3背景下的@font face规则）
- 动画用css3还是js（前端制作动画的几种方式css3，js）
- css3中过渡动画的属性（css3 中实现炫酷的loading效果）
- css3背景渐变动画效果（css3制作的背景渐变动画效果）
- css3实用指南（css3截图_动力节点Java学院整理）
- css3自制像素细线（css3绘制百度的小度熊）
- css3画出苹果手机（基于CSS3画一个iPhone）
- css3渐变背景教程（css3实现背景图片颜色修改的多种方式）
- jquerycss3轮播案例（CSS3实现列表无限滚动/轮播效果）
- css3伸缩布局及图解（利用CSS3实现自定义滚动条代码分享）
- css3菜单特效（超酷炫 CSS3垂直手风琴菜单）
- css3渐变放大功能（CSS3 渐变Gradients之CSS3 线性渐变）
- 鱼竿 夏钓短，冬钓长 ，一定是这样 认清优缺点在选竿（鱼竿夏钓短冬钓长）
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓（鲢鳙钓底还是钓浮）
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场（入秋后的第二场苹果发布会来了）
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel（苹果正式发布自研芯片M1）
- 苹果自研芯片跑分对比 A16芯片排名靠后，M1系列霸榜（苹果自研芯片跑分对比）
- X86处理器的梦魇 苹果M1自研芯片到底有多强（苹果M1自研芯片到底有多强）
热门推荐
- oracle RMAN CONFIGURE配置项
- nginx 怎么搭建web服务器（Linux+Nginx+Php架设高性能WEB服务器）
- laravel怎么设置返回指定列（在laravel5.2中实现点击用户头像更改头像的方法）
- 最新版MySQL 8.0.22下载安装超详细教程(Windows 64位)（最新版MySQL 8.0.22下载安装超详细教程Windows 64位）
- vue项目上线教程（vue项目中使用骨架屏的方法）
- ASP.NET cache缓存的用法
- 微信html5页面怎么制作（HTML5中外部浏览器唤起微信分享功能的代码）
- docker运行redis并操作（Docker安装MySQL和Redis的方法步骤）
- dedecms后台账号（dedecms实现首页顶部会员登陆框的方法）
- python中对象方法和顶级方法（Python3.5面向对象程序设计之类的继承和多态详解）