html, body, h1, h2, h3, h4, h5, h6, p, ul, li, div, dl, dt,dd, section { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; font-family: "微软雅黑"; } .waitting { z-index: 99; background-color: #7f943d; } .pacman { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } @-webkit-keyframes rotate_pacman_half_up { 0% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @keyframes rotate_pacman_half_up { 0% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } 50% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); } } @-webkit-keyframes rotate_pacman_half_down { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @keyframes rotate_pacman_half_down { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } } @-webkit-keyframes pacman-balls { 75% { opacity: 0.7; } 100% { -webkit-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px); } } @keyframes pacman-balls { 75% { opacity: 0.7; } 100% { -webkit-transform: translate(-100px, -6.25px); transform: translate(-100px, -6.25px); } } .pacman>div:nth-child(2) { -webkit-animation: pacman-balls 1s 0s infinite linear; animation: pacman-balls 1s 0s infinite linear; } .pacman>div:nth-child(3) { -webkit-animation: pacman-balls 1s 0.33s infinite linear; animation: pacman-balls 1s 0.33s infinite linear; } .pacman>div:nth-child(4) { -webkit-animation: pacman-balls 1s 0.66s infinite linear; animation: pacman-balls 1s 0.66s infinite linear; } .pacman>div:nth-child(5) { -webkit-animation: pacman-balls 1s 0.99s infinite linear; animation: pacman-balls 1s 0.99s infinite linear; } .pacman>div:first-of-type { width: 0px; height: 0px; border-right: 25px solid transparent; border-top: 25px solid #fff; border-left: 25px solid #fff; border-bottom: 25px solid #fff; border-radius: 25px; -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite; animation: rotate_pacman_half_up 0.5s 0s infinite; } .pacman>div:nth-child(2) { width: 0px; height: 0px; border-right: 25px solid transparent; border-top: 25px solid #fff; border-left: 25px solid #fff; border-bottom: 25px solid #fff; border-radius: 25px; -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite; animation: rotate_pacman_half_down 0.5s 0s infinite; margin-top: -50px; } .pacman>div:nth-child(3), .pacman>div:nth-child(4), .pacman>div:nth-child(5), .pacman>div:nth-child(6) { background-color: #fff; width: 15px; height: 15px; border-radius: 100%; margin: 2px; width: 10px; height: 10px; position: absolute; -webkit-transform: translate(0, -6.25px); -ms-transform: translate(0, -6.25px); transform: translate(0, -6.25px); top: 25px; left: 100px; } .wait-text{ display:block; color:#fff; font-size:12px; margin-top:20px; } .all { position: relative; width: 100%; height: 100%; } .all section { position: absolute; } .ren-text{ width:20vw; float:right; color:#fff; font-size:14px; position:absolute; z-index:2; right:0; top:10px; } .full { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .bg { background-repeat: repeat-y; background-size: 100vw 177vw; background-image: url(../img/bg.png); background-position-x: center; animation: bg 6s infinite linear; } @keyframes bg { 0% { background-position-y: 0; } 100% { background-position-y: -177vw; } } .line { position: absolute; width: 1vw; top: 10%; bottom: 5%; background: url(../img/line.png) repeat center top; background-size: 100% auto; } .l2 { left: 35%; } .l3 { left: 65%; } #renBox { z-index: 11; } .ren-box{ bottom:2vh; } .ren-num { position:absolute; bottom:0; width: 25vw; height: 5vw; text-align: center; box-sizing: border-box; line-height: 5vw; /* background-color: rgba(255, 255, 255, 0.8); */ border-radius: 50%; font-size: 3vw; } .ren-num>span { font-size: 5vw; } .ren1 { left: 7vw; } .ren2 { left: 42vw; } .ren3 { left: 73vw; } .time { width: 20vw; height: 20vw; border: 5px solid #FEDE82; border-radius: 50%; background-color: #fff; top: 1vw; left: 3vw; z-index: 3; line-height: 20vw; text-align: center; font-size: 11vw; color: #ff5216; } .question-box { top: 10vw; width: 92vw; background: url(../img/qus-top.png) no-repeat center top; background-size: auto 11vw; left: 4vw; } #go, #renBox, #endBox, #fail, #success { display: none; } .mute { position: absolute; z-index: 999; top: 5vw; right: 5vw; width: 8vw; height: 8vw; background: url(../img/mute.png) no-repeat; background-size: 100% auto; opacity: 1;} .mute * { position: absolute; width: 100%; height: 100%; background: url(../img/mute.png) no-repeat; background-size: 100% auto;} .mute dt {-webkit-animation: muteANI 2s linear infinite; background-position: 0 41%;} .mute dd { display: none; background-position: 0 83.5%; } .mute.on dt { display: none;} .mute.on dd { display: block;} @-webkit-keyframes muteANI{ 0%{ -webkit-transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg);} } .question { box-sizing: border-box; border: 5px solid #fede82; border-radius: 5vw; background-color: rgba(0, 0, 0, 0.8); width: 100%; min-height: 30vw; margin-top: 10vw; padding: 10px; padding-bottom: 5vw; color: #fff; line-height: 1.8; } .question>img { width: 100%; height: auto; display: block; margin: 0 auto; } .text { position: absolute; width: 30vw; height: 9.7vw; background: url(../img/text-bg.png) no-repeat center center; background-size: contain; bottom: -4vw; left: 31vw; font-size: 18px; text-align: center; line-height: 9.7vw; } .box { position: absolute; left: 5%; width: 90%; top: 10%; bottom: 20%; /* padding:0 1vw; height:119vw; overflow:hidden; */ } .answer-box { width: 90%; left: 5%; bottom: 10vw; z-index: 12; } .ans { position: absolute; bottom: 0; width: 20vw; height: 20vw; border-radius: 50%; border: 3px solid #FEDE82; font-size: 12vw; text-align: center; line-height: 20vw; color: #fff; font-weight: bold; overflow: hidden; } .ans.active { transform: translate(3px, 3px); -webkit-transform: translate(3px, 3px); } .ans.active:before { content: ""; position: absolute; background: rgba(0, 0, 0, 0.3); top: 0; bottom: 0; left: 0; right: 0; } .ans-1 { left: 5vw; background-color: #09874b; } .ans-2 { left: 35vw; background-color: #008aa2; } .ans-3 { left: 65vw; background-color: #be4b46; } .trapbox { display: none; } .trap { position: absolute; bottom: 5%; width: 35vw; height: 32vw; background-repeat: no-repeat; background-position: center; background-size: 95% auto; animation: ani 2s both linear; z-index: 11; } .trap.r0 { left: 0 } .trap.r1 { left: 35vw; } .trap.r2 { left: 62vw; } .trap1 { background-image: url(../img/trap1.png); } .trap2 { background-image: url(../img/trap2.png); } .trap3 { background-image: url(../img/trap3.png); } .trap4 { background-image: url(../img/trap4.png); } @keyframes ani { 0% { transform: translateY(0); } 100% { transform: translateY(-200vw); } } .end-box { z-index: 12; background: rgba(0, 0, 0, 0.8); } .end-box:before { content: ""; position: absolute; top: 20vh; left: 10vw; width: 80vw; height: 5vh; background: url(../img/qus-top.png) no-repeat center top; background-size: auto 5vh; } .end { margin: 25vh auto 0; background-color: #fede82; height: 60vw; width: 80vw; border-radius: 5vw; box-sizing: border-box; padding: 20vw 5px; line-height: 10vw; font-size: 6vw; text-align: center; color: #FF5216; font-weight: bold; } .figure { width: 10vw; height: 10vw; background-repeat: no-repeat; background-image: url(../img/figure.png); background-size: 50vw auto; position: absolute; transition: all 1s; left: -20vw; bottom: 100vh; } .figure.err { transform: translateY(-100vh); -webkit-transform: translateY(-100vh); transition: all 2s linear; } .figure.me { z-index: 10; } .figure.me:before, .figure.me:after { z-index: 9; content: ""; position: absolute; left: 0vw; } .figure.me:before { content: "me"; top: -12vw; width: 10vw; height: 10vw; background-color: #fff; border-radius: 50%; z-index: 10; font-size: 4.5vw; line-height: 10vw; text-align: center; font-weight: bold; color: #a8483b; } .figure.me:after { top: -6vw; border-top: 7vw solid #fff; border-left: 5vw solid transparent; border-right: 5vw solid transparent; } .f1 { background-position: 1vw -1.5vw; } .f2 { background-position: -9vw -1.5vw; } .f3 { background-position: -17.5vw 0; background-size: 45vw auto; } .f4 { background-position: -30vw -1.5vw; } .f5 { background-position: -40.8vw -1.5vw; } .f6 { background-position: 1vw -12vw; } .f7 { background-position: -9vw -12vw; } .f8 { background-position: -20vw -12vw; } .f9 { background-position: -30vw -12vw; } .f10 { background-position: -40.5vw -12vw; } .f11 { background-position: 1vw -22.8vw; } .f12 { background-position: -9vw -22.8vw; } .f13 { background-position: -20vw -22.8vw; } .f14 { background-position: -30vw -22.8vw; } .f15 { background-position: -40.8vw -22.8vw; } .f16 { background-position: 1vw -33vw; } .f17 { background-position: -9vw -33vw; } .f18 { background-position: -20vw -33vw; } .f19 { background-position: -30vw -33vw; } .f20 { background-position: -40.8vw -33vw; } .d0-0 { bottom: 0vw; left: 20vw; } .d0-1 { bottom: 0vw; left: 10vw; } .d0-2 { bottom: 0vw; left: 0vw; } .d0-3 { bottom: 10vw; left: 20vw; } .d0-4 { bottom: 10vw; left: 10vw; } .d0-5 { bottom: 10vw; left: 0vw; } .d0-6 { bottom: 20vw; left: 20vw; } .d0-7 { bottom: 20vw; left: 10vw; } .d0-8 { bottom: 20vw; left: 0vw; } .d0-9 { bottom: 30vw; left: 20vw; } .d0-10 { bottom: 30vw; left: 10vw; } .d0-11 { bottom: 30vw; left: 0vw; } .d0-12 { bottom: 40vw; left: 20vw; } .d0-13 { bottom: 40vw; left: 10vw; } .d0-14 { bottom: 40vw; left: 0vw; } .d0-15 { bottom: 50vw; left: 20vw; } .d0-16 { bottom: 50vw; left: 10vw; } .d0-17 { bottom: 50vw; left: 0vw; } .d0-18 { bottom: 60vw; left: 20vw; } .d0-19 { bottom: 60vw; left: 10vw; } .d0-20 { bottom: 60vw; left: 0vw; } .d0-21 { bottom: 70vw; left: 20vw; } .d0-22 { bottom: 70vw; left: 10vw; } .d0-23 { bottom: 70vw; left: 0vw; } .d0-24 { bottom: 80vw; left: 20vw; } .d0-25 { bottom: 80vw; left: 10vw; } .d0-26 { bottom: 80vw; left: 0vw; } .d0-27 { bottom: 90vw; left: 20vw; } .d0-28 { bottom: 90vw; left: 10vw; } .d0-29 { bottom: 90vw; left: 0vw; } .d0-30 { bottom: 100vw; left: 20vw; } .d0-31 { bottom: 100vw; left: 10vw; } .d0-32 { bottom: 100vw; left: 0vw; } .d0-33 { bottom: 110vw; left: 20vw; } .d0-34 { bottom: 110vw; left: 10vw; } .d0-35 { bottom: 110vw; left: 0vw; } .d0-36 { bottom: 120vw; left: 20vw; } .d0-37 { bottom: 120vw; left: 10vw; } .d0-38 { bottom: 120vw; left: 0vw; } .d0-39 { bottom: 130vw; left: 20vw; } .d0-40 { bottom: 130vw; left: 10vw; } .d0-41 { bottom: 130vw; left: 0vw; } .d1-0 { bottom: 0vw; left: 50vw; } .d1-1 { bottom: 0vw; left: 40vw; } .d1-2 { bottom: 0vw; left: 30vw; } .d1-3 { bottom: 10vw; left: 50vw; } .d1-4 { bottom: 10vw; left: 40vw; } .d1-5 { bottom: 10vw; left: 30vw; } .d1-6 { bottom: 20vw; left: 50vw; } .d1-7 { bottom: 20vw; left: 40vw; } .d1-8 { bottom: 20vw; left: 30vw; } .d1-9 { bottom: 30vw; left: 50vw; } .d1-10 { bottom: 30vw; left: 40vw; } .d1-11 { bottom: 30vw; left: 30vw; } .d1-12 { bottom: 40vw; left: 50vw; } .d1-13 { bottom: 40vw; left: 40vw; } .d1-14 { bottom: 40vw; left: 30vw; } .d1-15 { bottom: 50vw; left: 50vw; } .d1-16 { bottom: 50vw; left: 40vw; } .d1-17 { bottom: 50vw; left: 30vw; } .d1-18 { bottom: 60vw; left: 50vw; } .d1-19 { bottom: 60vw; left: 40vw; } .d1-20 { bottom: 60vw; left: 30vw; } .d1-21 { bottom: 70vw; left: 50vw; } .d1-22 { bottom: 70vw; left: 40vw; } .d1-23 { bottom: 70vw; left: 30vw; } .d1-24 { bottom: 80vw; left: 50vw; } .d1-25 { bottom: 80vw; left: 40vw; } .d1-26 { bottom: 80vw; left: 30vw; } .d1-27 { bottom: 90vw; left: 50vw; } .d1-28 { bottom: 90vw; left: 40vw; } .d1-29 { bottom: 90vw; left: 30vw; } .d1-30 { bottom: 100vw; left: 50vw; } .d1-31 { bottom: 100vw; left: 40vw; } .d1-32 { bottom: 100vw; left: 30vw; } .d1-33 { bottom: 110vw; left: 50vw; } .d1-34 { bottom: 110vw; left: 40vw; } .d1-35 { bottom: 110vw; left: 30vw; } .d1-36 { bottom: 120vw; left: 50vw; } .d1-37 { bottom: 120vw; left: 40vw; } .d1-38 { bottom: 120vw; left: 30vw; } .d1-39 { bottom: 130vw; left: 50vw; } .d1-40 { bottom: 130vw; left: 40vw; } .d1-41 { bottom: 130vw; left: 30vw; } .d2-0 { bottom: 0vw; left: 81vw; } .d2-1 { bottom: 0vw; left: 71vw; } .d2-2 { bottom: 0vw; left: 61vw; } .d2-3 { bottom: 10vw; left: 81vw; } .d2-4 { bottom: 10vw; left: 71vw; } .d2-5 { bottom: 10vw; left: 61vw; } .d2-6 { bottom: 20vw; left: 81vw; } .d2-7 { bottom: 20vw; left: 71vw; } .d2-8 { bottom: 20vw; left: 61vw; } .d2-9 { bottom: 30vw; left: 81vw; } .d2-10 { bottom: 30vw; left: 71vw; } .d2-11 { bottom: 30vw; left: 61vw; } .d2-12 { bottom: 40vw; left: 81vw; } .d2-13 { bottom: 40vw; left: 71vw; } .d2-14 { bottom: 40vw; left: 61vw; } .d2-15 { bottom: 50vw; left: 81vw; } .d2-16 { bottom: 50vw; left: 71vw; } .d2-17 { bottom: 50vw; left: 61vw; } .d2-18 { bottom: 60vw; left: 81vw; } .d2-19 { bottom: 60vw; left: 71vw; } .d2-20 { bottom: 60vw; left: 61vw; } .d2-21 { bottom: 70vw; left: 81vw; } .d2-22 { bottom: 70vw; left: 71vw; } .d2-23 { bottom: 70vw; left: 61vw; } .d2-24 { bottom: 80vw; left: 81vw; } .d2-25 { bottom: 80vw; left: 71vw; } .d2-26 { bottom: 80vw; left: 61vw; } .d2-27 { bottom: 90vw; left: 81vw; } .d2-28 { bottom: 90vw; left: 71vw; } .d2-29 { bottom: 90vw; left: 61vw; } .d2-30 { bottom: 100vw; left: 81vw; } .d2-31 { bottom: 100vw; left: 71vw; } .d2-32 { bottom: 100vw; left: 61vw; } .d2-33 { bottom: 110vw; left: 81vw; } .d2-34 { bottom: 110vw; left: 71vw; } .d2-35 { bottom: 110vw; left: 61vw; } .d2-36 { bottom: 120vw; left: 81vw; } .d2-37 { bottom: 120vw; left: 71vw; } .d2-38 { bottom: 120vw; left: 61vw; } .d2-39 { bottom: 130vw; left: 81vw; } .d2-40 { bottom: 130vw; left: 71vw; } .d2-41 { bottom: 130vw; left: 61vw; }