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

                    本站声明： 

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

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

                

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