用CSS3怎样成功实现NES游戏机的动画效果?

发布时间：2023-08-08 14:00:51 所属栏目：语言来源：

导读：　　这篇文章给大家分享的是用CSS实现NES游戏机的动画效果的内容。对大家学习CSS3使用有一定的帮助，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

　　实现代码

　　这篇文章给大家分享的是用CSS实现NES游戏机的动画效果的内容。对大家学习CSS3使用有一定的帮助，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

　　实现代码

　　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);

　　}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!