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% 5.........完整代码请登录后点击上方下载按钮下载查看