Nintendo
ENTERTAINMENT SYSTEM

 @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
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：css实现文章分割线样式的多种方法总结CSS巧妙实现自适应分隔线的N种方法
                                                                
下一篇：基于CSS3画一个iPhoneCSS3 实现NES游戏机的示例代码CSS3鼠标悬浮过渡缩放效果CSS3实现的文字弹出特效纯 CSS3实现的霓虹灯特效CSS3 实现的图片悬停的切换按钮CSS3实现三角形不断放大效果css3实现背景图片颜色修改的多种方式CSS3 制作的悬停缩放特效