<!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 #000;
bo
基于Html5小游戏（HTML5期末大作业） （114个子文件） 
public.css 4KB fiame.css 3KB
index.html 25KB index.html 14KB index.html 12KB index.html 10KB index.html 6KB index.html 6KB Don't Tap The White Tile.html 5KB index.html 4KB index.html 4KB index.html 1KB fish.ico 5KB
bg.jpg 1.77MB 5.jpg 999KB 4.jpg 757KB 3.jpg 556KB 2.jpg 329KB bg.jpg 239KB 1.jpg 177KB 6.jpg 173KB bj.jpg 76KB ygdbns.jpg 10KB jquery.min.js 94KB jquery.min.js 94KB jquery.min.js 91KB jquery.min.js 91KB main.js 85KB require.js 15KB frame.js 14KB main.js 11KB index.js 8KB quietflow.min.js 6KB prefixfree.min.js 6KB bgm.mp3 1.01MB bgm.mp3 66KB lose.mp3 15KB winner.mp3 13KB bigboom.mp3 9KB 1024.mp3 9KB 512.mp3 7KB boom.mp3 4KB 2.mp3 2KB fire.mp3 896B
feedingfrenzy.png 1.81MB hitbricks.png 1.73MB 2048.png 1.54MB planewars.png 538KB game2048.png 287KB spider.png 128KB fish.png 80KB FrogsEatFlies.png 57KB snake.png 35KB DoNotTapTheWhiteTile.png 23KB NotOneLess.png 18KB P.png 14KB f-1.png 8KB gdyx.png 5KB c-12.png 5KB b-11.png 5KB d-13.png 5KB c-13.png 5KB b-12.png 5KB d-12.png 5KB fish1.png 4KB b-13.png 4KB c-11.png 4KB a-13.png 4KB a-11.png 4KB d-11.png 4KB a-12.png 4KB P1.png 3KB wu.png 3KB d-10.png 2KB xiaoren.png 2KB b-10.png 2KB b-8.png 2KB d-9.png 2KB d-8.png 2KB c-10.png 2KB b-9.png 2KB a-10.png 2KB c-9.png 2KB c-8.png 2KB d-7.png 2KB c-7.png 2KB a-9.png 2KB b-7.png 2KB a-8.png 2KB b-6.png 2KB d-6.png 2KB c-6.png 2KB b-5.png 2KB a-7.png 2KB a-6.png 2KB d-5.png 1KB c-5.png 1KB b-4.png 1KB a-5.png 1KB b-3.png 1KB共 114 条
- 1
- 2
资源评论
