<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>喂个大青蛙</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@keyframes squiggly {
0% {
filter: url("#squiggly-0");
}
25% {
filter: url("#squiggly-1");
}
50% {
filter: url("#squiggly-3");
}
100% {
filter: url("#squiggly-4");
}
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
color: #000;
font-size: 2.5vh;
}
body {
font-family: arial;
}
body.dark {
color: #fff;
}
.card {
overflow: hidden;
max-width: 20em;
padding: 1em;
margin: 0 auto 1em;
background: rgba(255, 255, 255, 0.25);
border: 1px solid #000;
border-radius: 0.25em;
}
.btn {
display: block;
margin: 0 auto 0.5em;
padding: 1em;
max-width: 20em;
font-weight: bold;
letter-spacing: 1px;
text-decoration: none !important;
text-transform: uppercase;
text-shadow: none !important;
background: #fff;
transition: all 0.2s;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: #000;
}
.checkbox {
display: inline-block;
font-weight: bold;
text-transform: uppercase;
}
.checkbox input {
display: none;
}
.checkbox span {
display: block;
padding: 1em;
background: #fff;
border: 1px solid #bbb;
border-radius: 4px;
color: #000;
transition: all 0.2s;
cursor: pointer;
}
.checkbox input:checked + span {
border-color: #000;
}
.play .text {
font-size: 2em;
}
.scoreboard .scoreboard-list {
display: inline-block;
padding: 0;
margin: 0;
text-align: right;
}
.game .hud {
padding: 0 1rem;
font-size: 1.5rem;
letter-spacing: 1px;
}
.dark .game .hud {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -1px 0 rgba(0, 0, 0, 0.1), 1px 0 0 rgba(0, 0, 0, 0.1), -1px 0 0 rgba(0, 0, 0, 0.1), 1px 1px 0 rgba(0, 0, 0, 0.1), -1px -1px 0 rgba(0, 0, 0, 0.1), -1px 1px 0 rgba(0, 0, 0, 0.1), 1px -1px 0 rgba(0, 0, 0, 0.1);
}
.game .hud .label {
display: block;
font-size: 0.6em;
font-weight: normal;
text-transform: uppercase;
}
.game .hud .value {
font-size: 2em;
font-weight: bold;
line-height: 1;
}
.game .time {
float: left;
}
.game .score {
float: right;
}
.dark .win {
text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black, 1px 1px 0 black, -1px -1px 0 black, -1px 1px 0 black, 1px -1px 0 black;
}
.win .score {
float: left;
}
.win .best {
float: right;
}
.win .label {
display: block;
font-size: 0.6em;
font-weight: normal;
text-transform: uppercase;
}
.win .value {
font-size: 2em;
font-weight: bold;
line-height: 1;
}
.win .highscore {
display: block;
clear: both;
}
.win .highscore.is-hidden {
display: none;
}
.screen {
position: fixed;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
padding: 1em;
overflow: hidden;
text-align: center;
visibility: hidden;
opacity: 0;
transform: translateY(-1em);
transition: all 0.2s 0.1s;
}
.screen.is-active {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.screen.game {
padding-left: 0;
padding-right: 0;
background: none;
}
.screen h1 {
text-transform: uppercase;
}
.sky {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.5s;
background: #fff;
cursor: pointer;
}
.outlines .sky {
background: #fff;
}
.light .sky {
background: #aedef7;
}
.dark .sky {
background: #002;
}
.sky:before {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.0001), #fff);
opacity: 0.5;
content: '';
transition: all 0.2s;
}
.dark .sky:before {
opacity: 0.3;
}
@keyframes twinkle {
0% {
border-left-color: white;
border-right-color: rgba(255, 255, 255, 0);
}
33.3334% {
border-left-color: rgba(255, 255, 255, 0);
border-right-color: white;
}
66.6667% {
border-left-color: rgba(255, 255, 255, 0);
border-right-color: white;
}
100% {
border-left-color: white;
border-right-color: rgba(255, 255, 255, 0);
}
}
.stars {
position: fixed;
left: 2em;
right: 2em;
top: 4em;
height: 2px;
transform: rotate(40deg);
border-width: 0 2px;
border-style: solid;
border-color: #fff;
opacity: 0;
transform: translateY(-5em);
transition: all 0.5s;
will-change: opacity;
animation: twinkle 6s infinite alternate;
}
.dark .stars {
opacity: 1;
transform: translateY(0);
}
.stars:before, .stars:after {
position: fixed;
top: 6em;
left: 2em;
right: 0em;
height: inherit;
border: inherit;
transform: rotate(-15deg);
opacity: 0.5;
content: '';
will-change: opacity;
}
.stars:before {
animation: twinkle 3s infinite alternate-reverse;
}
.stars:after {
top: 0.5em;
left: 3em;
right: 6em;
opacity: 1;
transform: rotate(-30deg);
animation: twinkle 6s infinite alternate;
}
.moon {
position: fixed;
bottom: 20em;
left: 50%;
width: 10em;
height: 10em;
background: #fff;
border-radius: 50%;
transition: all 0.5s ease-in-out;
transform: translateY(2em);
box-shadow: 0 0 4em #fff, 0 0 12em #fff, 0 0 0 6em rgba(211, 230, 235, 0.025), 0 0 0 12em rgba(211, 230, 235, 0.025), 0 0 0 18em rgba(211, 230, 235, 0.025);
opacity: 0;
}
.moon:before, .moon:after {
position: absolute;
top: 20%;
left: 10%;
width: 30%;
height: 30%;
border-radius: 50%;
background: rgba(0, 0, 0, 0.05);
box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.1);
content: '';
opacity: 0.1;
}
.moon:after {
top: auto;
left: auto;
bottom: 10%;
right: 10%;
width: 50%;
height: 50%;
opacity: 0.1;
}
.dark .moon {
transform: translateY(0);
opacity: 1;
}
.mountains {
opacity: 0.3;
}
.dark .mountains {
opacity: 0.9;
}
.mountain {
position: fixed;
left: -100%;
bottom: -3em;
width: 200%;
height: 14em;
background: #fff;
border-radius: 0 100% 0 0;
transition: all 0.5s ease-in-out;
}
.light .mountain {
background: #a4c18b;
}
.dark .mountain {
background: #0a0a2a;
}
.mountain--2 {
left: auto;
right: -10%;
height: 10em;
border-radius: 100% 0 0 0;
}
.grass {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 8em;
background: #fff;
transition: all 0.5s ease-in-out;
}
.light .grass {
background: #a7cc67;
}
.dark .grass {
background: #0f0f2f;
}
.water {
position: fixed;
z-index: 2;
left: 0;
right: 0;
bottom: 0;
height: 3em;
transition: all 0.5s ease-in-out;
background: #fff;
}
.light .water {
background: #5f96d5;
}
.dark .water {
background: #0f0f2f;
}
.tree {
position: absolute;
z-index: 3;
right: 38%;
top: -6.8em;
width: 1.5em;
height: 10em;
transition: all 0.5s;
background: #fff;
transform: scale(0.2, 0.2);
transform-origin: 50% 100%;
}
.light .tree {
background: #6f4817;
}
.dark .tree {
background: #0a0a2a;
}
.tree:before, .tree:after {
position: absolute;
left: 50%;
bottom: 2em;
display: inline-block;
width: 0;
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
border-width: 0 6em 12em;
border-style: solid;
border-color: transparent;
border-radius: 0 0 100% 100% / 0 0 1em 1em;
border-bottom-color: #fff;
content: '';
}
.light .tree:before, .light .tree:after {
border-bottom-color: #2d5e3b;
}
.dark .tree:before, .dark .tree:after {
border-bottom-color: #0a0a2a;
}
.tree:after {
width: 0;
bottom: 9em;
border-width: 0 3em 6em;
}
.tree--2 {
left: auto;
right: 1.5em;
top: -5.9em;
transform: scale(0.2, 0.2);
}
.tree--3 {
top: -5.5em;
right: 47%;
transform: scale(0.4, 0.4);
}
.lily {
@extends .shadow;
position: fixed;
z-index: 3;
left: 50%;
bottom: 0.5em;
height: 1.5em;
width: 12em;
transform: translateX(-50%);
background: #fff;
border: 1px solid
