• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    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游戏机的资料请关注脚本之家其它相关文章!

    上一篇:css实现文章分割线样式的多种方法总结
    下一篇:基于CSS3画一个iPhone
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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