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;
}