Web知识: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); } 如果Web知识:CSS3 实现NES游戏机的示例代码没有解决您的问题，您还可以在CSS栏目中查看更多相关内容。
