css布局实现一个任天堂游戏机效果代码-html代码-BFW代码库

css布局实现一个任天堂游戏机效果代码

代码语言：html

代码描述：css布局实现一个任天堂游戏机效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        * {
          box-sizing: border-box;
        }
        
        body {
          font-size: 0.9vmin;
          background: #fff;
          background: #fff;
          background-size: 1300px;
          background-repeat: no-repeat;
          background-position: 62% 10%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100vw;
          height: 100vh;
        }
        body .btns_top {
          z-index: 5;
          position: absolute;
          left: 0%;
          top: 0%;
        }
        
        .switch_body {
          width: 104em;
          height: 45em;
          position: absolute;
          background: linear-gradient(#303135 2%, #3b5052 30%, #303135 70%) 25% 1%/6em 2em;
          background-repeat: no-repeat;
        }
        .switch_body .controller_left {
          width: 14.3em;
          height: 43.5em;
          top: 50%;
          transform: translate(0, -50%);
          position: absolute;
          left: 0.2em;
          background: radial-gradient(115% 50% at 100% 104%, rgba(255, 0, 0, 0) 45%, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0) 60%) -1em -5em/15em 8em, radial-gradient(120% 100% at 101% 100%, #00b8de 38%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0) 50%) -5.7em -8em/15em 16em, linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1), #00b8de) 0.5em 8em/2em 27.8em, linear-gradient(rgba(0, 0, 0, 0.1), #00b8de) 100% 0%/4.96em 2em, linear-gradient(#00b8de, rgba(0, 0, 0, 0.15)) 100% 100%/4.95em 2em, radial-gradient(120% 100% at 101% 0%, #00b8de 38%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.15) 49%, rgba(0, 0, 0, 0) 50%) -5.7em 130%/15em 16em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 100%/15em 16em, linear-gradient(#00b8de, #00b8de) 60% 99.6%/2em 8em, linear-gradient(#00b8de, #00b8de) 50% 50%/5em 27em, linear-gradient(#00b8de, #00b8de) 0.5em 50%/5em 27em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 0.5em/15em 16em, radial-gradient(120% 93% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5em -0.4em/15em 15em, radial-gradient(120% 93% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -6.4em -0.5em/18em 15em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 100%/15em 16em, radial-gradient(120% 100% at 101% 50%, #00b8de 49%, rgba(0, 0, 0, 0) 50%) -5.7em 100%/15em 16em, linear-gradient(#00b8de, #00b8de) 100% 0.1em/3em 27em, linear-gradient(#00b8de, #00b8de) 100% 1em/5em 42.5em;
          background-repeat: no-repeat;
        }
        .switch_body .controller_left .btns .top_right {
          box-shadow: 1px 1.5px 2px rgba(0, 0, 0, 0.8);
          width: 2.5em;
          height: 1em;
          position: absolute;
          background: linear-gradient(rgba(255, 255, 255, 0.1) 10%, rgba(0, 0, 0, 0) 80%) 100% 0.1em/100% 100%, #3B5052;
          background-repeat: no-repeat;
          border-radius: 2px;
          top: 9.5%;
          left: 76%;
        }
        .switch_body .controller_left .btns .joystick {
          box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
          width: 6.7em;
          height: 6.7em;
          position: absolute;
          backgrou.........完整代码请登录后点击上方下载按钮下载查看