Inscription #65962612#65,962,612png#64,451,937#14,291,772jsInscription #14124101#14,124,101htmlInscription #14124097#14,124,097html#14,104,612js@font-face { font-family: Silkscreen; font-style: normal; font-weight: 400; src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype'); unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd } * { box-sizing: border-box; margin: 0; padding: 0; } body, html { position: relative; font-family: Silkscreen; font-size: 16px; color: #fff; background: #000; max-height: 100%; overflow: hidden; } .snake-content { position: relative; width: 576px; height: 576px; /* border: 1px solid #fff; */ margin: 0 auto; transform-origin: top left; /* overflow: hidden; */ } .game-title { font-size: 66px; color: #FFC400; margin-top: 82px; line-height: 66px; } .start-button { width: 160px; height: 52px; position: relative; background: #FF920E; cursor: pointer; font-size: 20px; color: #FF920E; transition: all .2s; } .start-button:hover { opacity: .8; } .start-button.loading .lds-ring{ display: inline-block; } /* 初始化像素盒子样式 */ .pixel-box:before, .pixel-box:after, .pixel-box-child:before, .pixel-box-child:after { position: absolute; content: ''; display: block; background: #000; width: 5px; height: 5px; } .pixel-box:before { top: 0; left: 0; } .pixel-box:after { top: 0; right: 0; } .pixel-box .pixel-box-child { position: absolute; left: 5px; top: 5px; right: 5px; bottom: 5px; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; background: #000; } .pixel-box .pixel-box-child:before { bottom: -5px; left: -5px; } .pixel-box .pixel-box-child:after { bottom: -5px; right: -5px; } /* head */ .header { display: flex; width: 452px; height: 90px; align-items: center; margin: 0 auto; position: relative; } .header .header-item { flex: 1; text-align: center; position: relative; } .header .header-item .food-icon { display: inline-block; width: 12px; height: 12px; background-color: #FFC400; position: relative; top: 1px; } .header .header-item span { margin-top: 5px; } .header .header-item .fee-add-count{ position: absolute; left: 64px; top: 13px; font-size: 14px; color: #FF920E; transform: translateY(5px); visibility: hidden; } .header .header-item .fee-add-count.show{ visibility: initial; transform: translateY(-3px); transition: all .4s; } .header .food-hash{ position: absolute; bottom: 5px; font-size: 12px; left: 0; /* transform: translateX(-50%); left: 50%; */ } .header .food-hash .value{ transform: scale(.7) translateY(0px); transform-origin: left bottom; white-space: nowrap; /* opacity: 1; */ } .header .food-hash .value.active{ color: #FF920E; transition: transform .4s; transform: scale(.7) translateY(-8px); } /* 游戏界面 */ .game-content { width: 452px; height: 452px; margin: 0 auto; text-align: center; border: 1px solid #fff; position: relative; } .game-content .horizontal { position: absolute; left: 0; right: 0; height: 0px; border-top: 1px solid rgba(255, 255, 255, .08); } .game-content .vertical { position: absolute; top: 0; bottom: 0; width: 0px; border-left: 1px solid rgba(255, 255, 255, .08); } .game-content .map { position: relative; overflow: hidden; z-index: 1; transform-origin: bottom left; } .game-content .map .food{ /* opacity: .6; */ animation: flashing-animation .5s infinite; } .game-content .map .food .food-sats{ position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 12px; } .game-content .map .food .food-sats{ position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 12px; } .game-content .map .food .food-sats-left{ left: -10px; transform: translateX(-100%); bottom: -2px; } .game-content .map .food .food-sats-right{ left: 100%; transform: translateX(10px); bottom: -2px; } /* 欢迎页 */ .start-interface { display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 999; top: 88px; left: 0; right: 0; height: 455px; background: #000; } .start-interface .email-input { width: 450px; height: 50px; position: relative; background-color: #2E2C2C; margin-top: 82px; } .start-interface .email-input .pixel-box-child { background: #000; padding: 0 14px; } .start-interface .email-input .email-icon { width: 5px; height: 12px; background: #FFC400; margin-right: 6px; } .start-interface .email-input input { flex: 1; height: 100%; outline: none; border: none; background: transparent; color: #fff; font-family: 'Silkscreen', sans-serif; font-size: 16px; } .start-interface .email-input input::placeholder { color: #bbbcbb; } .start-interface .start-button { margin-top: 76px; } /* 结束 */ .replay-content { position: absolute; z-index: 999; top: 88px; left: 0px; right: 0; height: 455px; background-color: #000; flex-direction: column; align-items: center; display: none; } .replay-content .claim-tips{ text-align: center; line-height: 2em; } .replay-content .game-title { margin-top: 72px; font-size: 66px; } .game-over .start-button{ margin: 70px 0 60px; } /* copy-list */ .copy-list { width: 452px; font-size: 20px; margin-top: 55px; } .copy-list .info-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 44px; line-height: 44px; color: #FF920E; cursor: pointer; } .copy-list .info-item .label { cursor: initial; color: #fff; margin-right: 8px; } .copy-list .start-button { margin-top: 56px; } /* 游戏状态 */ .game-start .first-show { display: none; } .address-interface { display: none; } .address-block .address-interface { display: flex; } .replay-block .game-over { display: flex; } .win-block .game-win { display: flex; } /* first-show */ .first-show .game-title{ margin-top: 72px; } .first-show .email-input{ margin-top: 62px; } .first-show .copy-list{ margin-top: 20px; } .first-show .copy-list .info-item{ font-size: 13px; height: 26px; line-height: 26px; } .first-show .start-button { margin-top: 45px; } /* address-interface */ .address-interface{ } .address-interface .block-number{ text-align: left; width: 100%; box-sizing: border-box; padding-left: 60px; margin-top: 70px; } .address-interface .email-input{ margin-top: 20px; } /* game-win */ .game-win{} .game-win .game-title{ text-align: center; width: 450px; } .game-win .start-button{ margin-top: 50px; } /* utils */ #copyI { width: 10px; height: 1px; z-index: -9; opacity: 0; position: absolute; } .message-tips { background: #de5927; position: absolute; top: 2em; z-index: 5; padding: 0 0.8em; line-height: 1.5em; border-radius: 2px; left: 50%; transform: translateX(-50%); font-size: 20px; transition: top .3s; opacity: 0; } .message-tips.show { opacity: 1; top: 3em; } .lds-ring { display: none; position: relative; width: 20px; height: 20px; margin-right: 0.4em; } .lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 100%; height: 100%; border: 2px solid #FF920E; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #FF920E transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; } .lds-ring div:nth-child(2) { animation-delay: -0.3s; } .lds-ring div:nth-child(3) { animation-delay: -0.15s; } @keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes flashing-animation { 0% { box-shadow: 0px 0px 5px 0px #ffc400; } 50% { box-shadow: 0px 0px 5px 1px #ffc400; } 100% { box-shadow: 0px 0px 5px 0px #ffc400; } } .canvas-content{ width: 450px; height: 450px; position: absolute; top: 91px; left: 50%; transform: translateX(-50%); overflow: hidden; } #webgl-canvas { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; /* z-index: 2 */ } #webgl-canvas.hide { display: none; width: 100%; height: 100%; /* opacity: .5; */ } #14,104,609text#14,104,608js#14,104,607js#14,097,816js