一，Switch游戏机
1，大家好，我们老样子先放运行的照片放在下面。
2，看到上面的Switch游戏机有没有想快点想拿到源码的感觉，大家不要急，不妨先给我点个赞，如果给个关注那就更好了，谢谢大家！Switch游戏机代码如下，请大家自行观看。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>海拥 | Switch游戏机</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="shortcut icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg">
<style>:root {--joycon-left: #00BAE1;--joycon-right: #F22E38;--btn: #262525;
}.box {position: relative;margin: 5% auto;width: 902px;height: 384px;
}.switch-container {position: absolute;width: 100%;height: 100%;
}.joy-con-left {position: absolute;width: 15%;height: 100%;background: var(--joycon-left);border-top-left-radius: 90px;border-bottom-left-radius: 90px;box-shadow: inset 5px 5px 10px var(--joycon-left), inset 7px 15px 5px -5px rgba(255,255,255,.6), inset 10px -35px 8px -25px rgba(0,0,0,.4), inset 12px 0px 10px -5px rgba(0,0,0,.4);
}.bumper-left {position: absolute;width: 100%;height: 50%;top: -3px;left: -3px;background: rgba(0,0,0,.7);border-top-left-radius: 90px;z-index: -1;-webkit-clip-path: polygon(0 0, 80% 0, 80% 40%, 0 30%);clip-path: polygon(0 0, 80% 0, 80% 40%, 0 30%);
}.joy-con-right {position: absolute;right: 0;width: 15%;height: 100%;background: var(--joycon-right);border-top-right-radius: 90px;border-bottom-right-radius: 90px;box-shadow: inset -5px 5px 10px var(--joycon-right), inset -7px 15px 5px -5px rgba(255,255,255,.4), inset -10px -35px 8px -25px rgba(0,0,0,.3), inset -14px 0px 10px -5px rgba(0,0,0,.3);
}.bumper-right {position: absolute;width: 100%;height: 50%;top: -3px;right: -3px;background: rgba(0,0,0,.7);border-top-right-radius: 90px;z-index: -1;-webkit-clip-path: polygon(100% 0, 100% 30%, 20% 40%, 20% 0);clip-path: polygon(100% 0, 100% 30%, 20% 40%, 20% 0);
}.screen-outer {position: absolute;width: 70%;height: 100%;left: 15%;border-left: 1px solid black;border-right: 1px solid black;background: linear-gradient(to bottom, #2E3235, #414344);box-shadow: inset 0 15px 20px -10px rgba(255,255,255,.6), inset 0 -21px 20px -10px rgba(0,0,0,.8);
}.screen-inner {position: absolute;width: 93%;height: 94%;background: black;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 15px;box-shadow: inset 0 2px 0 -1px rgba(255,255,255,.6), inset 0 -1px 0 -1px white;
}.lcd {position: absolute;width: 75%;height: 75%;background: #E60012;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.reflector {position: absolute;width: 93%;height: 94%;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 15px;z-index: 5;overflow: hidden;
}.reflector::after {position: absolute;display: block;content: '';width: 400px;height: 800px;background-image: linear-gradient(190deg, rgba(255,255,255,.4), transparent 60%);transform: translate(70%, -5%) rotate(30deg);
}.minus-btn {position: absolute;top: 10%;right: 8%;width: 17%;height: 1.8%;background: #3a3a3a;border-radius: 2px;box-shadow: inset 1px 1px 1px rgba(255,255,255,.4), 0 0 0 1px #2b2b2b, 1px 2px 10px rgba(0,0,0,.5);
}.analog-left {position: absolute;top: 19%;left: 29%;width: 45%;height: 16%;background: linear-gradient(to bottom, #5e6367 0%,#141516 100%);border-radius: 50%;box-shadow: 0 -0.5px 1px 2px rgba(20,21,22,.9), 0 -2px 2px 2px var(--joycon-left), 0 1px 1px 1px #141516, 0 8px 35px 1px rgba(0,0,0,.5);
}.analog-left::before {content: '';position: absolute;background: linear-gradient(to top, #525659 40%, #424040 100%);width: 85%;height: 85%;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -51%);
}.analog-left::after {content: '';position: absolute;background: radial-gradient(circle at top, #788084 0%,#212427 100%);width: 76%;height: 76%;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -51%);
}.dpad-container-left {position: absolute;top: 42%;left: 17%;width: 70%;height: 25%;
}.dpad-up {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;left: 50%;transform: translateX(-50%);
}.dpad-up::after {font-family: "FontAwesome";content: '\f0d8';font-size: 22px;color: var(--btn);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.dpad-right {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;top: 50%;right: 0;transform: translateY(-50%);
}.dpad-right::after {font-family: "FontAwesome";content: '\00a0\f0da';font-size: 22px;color: var(--btn);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;line-height: 1.1;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.dpad-down {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;left: 50%;bottom: 0;transform: translateX(-50%);
}.dpad-down::after {font-family: "FontAwesome";content: '\f0d7';font-size: 22px;color: var(--btn);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;line-height: 1.2;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.dpad-left {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;top: 50%;transform: translateY(-50%);
}.dpad-left::after {font-family: "FontAwesome";content: '\00a0\f0d9';font-size: 22px;color: var(--btn);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;line-height: 1.1;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.square-btn {position: absolute;bottom: 22%;right: 25%;width: 17%;height: 6%;background: #3a3a3a;border-radius: 2px;box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 0 0 2px #262525, 1px 2px 8px rgba(0,0,0,.5);
}.square-btn::after {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%,-45%);width: 65%;height: 65%;background: #282828;border-radius: 50%;box-shadow: inset 0 -1px rgba(255,255,255,.3), inset 0 1px rgba(0,0,0,.5);
}.plus-btn {position: absolute;top: 7%;left: 8%;width: 17%;height: 6%;background: #3a3a3a;-webkit-clip-path: polygon(0 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);clip-path: polygon(0 35%, 35% 35%, 35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);box-shadow: inset 0px 1px 1px rgba(255,255,255,.4), 0 0 0 1px #2b2b2b, 1px 2px 10px rgba(0,0,0,.9);
}.dpad-container-right {position: absolute;top: 15%;left: 15%;width: 70%;height: 25%;
}.dpad-x {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;left: 50%;transform: translateX(-50%);
}.dpad-x::after {font-family: "Arial";content: 'X';font-size: 17px;color: rgba(255,255,255,.8);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;line-height: 1.5;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.dpad-a {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;top: 50%;right: 0;transform: translateY(-50%);
}.dpad-a::after {font-family: "Arial";content: 'A';font-size: 17px;color: rgba(255,255,255,.8);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;line-height: 1.5;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.dpad-b {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;left: 50%;bottom: 0;transform: translateX(-50%);
}.dpad-b::after {font-family: "Arial";content: 'B';font-size: 17px;color: rgba(255,255,255,.8);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;line-height: 1.5;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.dpad-y {position: absolute;width: 30%;height: 30%;background: var(--btn);border-radius: 50%;top: 50%;left: 0;transform: translateY(-50%);
}.dpad-y::after {font-family: "Arial";content: 'Y';font-size: 17px;color: rgba(255,255,255,.8);position: absolute;width: 87%;height: 84%;background: linear-gradient(to top, #424040, #5b5959);border-radius: 50%;top: 6.5%;left: 6%;text-align: center;line-height: 1.5;box-shadow: inset 0 1px 2px rgba(255,255,255,.5), 0 3px 15px rgba(0,0,0,.8);
}.analog-right {position: absolute;top: 48%;left: 26%;width: 45%;height: 16%;background: linear-gradient(to bottom, #5e6367 0%,#141516 100%);border-radius: 50%;box-shadow: 0 -0.5px 1px 2px rgba(20,21,22,.9), 0 -2px 2px 2px var(--joycon-right), 0 1px 1px 1px #141516, 0 8px 35px 1px rgba(0,0,0,.5);
}.analog-right::before {content: '';position: absolute;background: linear-gradient(to top, #525659 40%, #424040 100%);width: 85%;height: 85%;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -51%);
}.analog-right::after {content: '';position: absolute;background: radial-gradient(circle at top, #788084 0%,#212427 100%);width: 76%;height: 76%;border-radius: 50%;top: 50%;left: 50%;transform: translate(-50%, -51%);
}.home-btn {position: absolute;bottom: 22%;left: 20%;width: 21%;height: 7.5%;background: gray;border-radius: 50%;box-shadow: inset 0 1px 1px rgba(255,255,255,.3), 0 0 0 2px #262525, 1px 2px 8px rgba(0,0,0,.5);
}.home-btn::before {font-family: "FontAwesome";content: '\f015';display: inline-block;font-size: 17px;color: rgba(10,10,10,.7);position: absolute;width: 75%;height: 73%;background: #373C3F;border-radius: 50%;top: 50%;left: 50%;line-height: 1.2;text-align: center;transform: translate(-50%,-50%);
}.logo-left {position: absolute;top: 28%;left: 36%;box-sizing: border-box;width: 12%;height: 40%;border: 9px solid white;border-top-left-radius: 30px;border-bottom-left-radius:30px;animation: bounce .4s .6s;
}.logo-right {position: absolute;top: 28%;left: 51%;width: 11%;height: 40%;background: white;border-top-right-radius: 30px;border-bottom-right-radius:30px;animation: slide .9s cubic-bezier(1,-0.1,.45,1.05);
}.dot-left {position: absolute;left: 23%;top: 15%;width: 59%;height: 24%;background: white;border-radius: 50%;
}.dot-right {position: absolute;left: 24%;top: 44%;width: 48%;height: 22%;background: #E60012;border-radius: 50%;
}@keyframes slide {from {top: 8%;}50% {top: 6%;}70% {top: 32%;}
}@keyframes bounce {35% {top: 32%;}
}
</style>
</head>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="box"><div class="switch-container"></div><div class="joy-con-left"><div class="bumper-left"></div><div class="minus-btn"></div><div class="analog-left"></div><div class="dpad-container-left"><div class="dpad-up"></div><div class="dpad-right"></div><div class="dpad-down"></div><div class="dpad-left"></div></div><div class="square-btn"></div></div><div class="joy-con-right"><div class="bumper-right"></div><div class="plus-btn"></div><div class="dpad-container-right"><div class="dpad-x"></div><div class="dpad-a"></div><div class="dpad-b"></div><div class="dpad-y"></div></div><div class="analog-right"></div><div class="home-btn"></div></div><div class="screen-outer"><div class="screen-inner"></div><div class="reflector"></div><div class="lcd"><div class="logo-left"><div class="dot-left"></div></div><div class="logo-right"><div class="dot-right"></div></div></div></div>
</div>
</body>
</html>
