<!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
资源评论
程序员佳倩
- 粉丝: 978
- 资源: 5198
最新资源
- go-zero和gorm构建的分布式微服务后端权限管理系统（含前端+后端完整 源码）.zip
- GA优化BP神经网络项目-基于Python（含源码+项目说明+设计报告）.zip
- Golang开发的微服务博客系统+设计文档资料等（包括博文、评论、用户服务等模块）.zip
- Go语言编写的区块链可信对账系统（含源码及设计报告）.zip
- Go语言构建的简易区块链demo实验（包含完整代码和指导手册）.zip
- Go语言搭建多节点区块链网络实战指南（含源码及设计文档）.zip
- Go语言开发微信视频号自动回复打招呼服务端项目源码+设计文档.zip
- GPT-SoVITS推理-中文情绪分析自动切换参考音含源码.zip
- Hyperledger Fabric支持的分布式身份可信认证区块链解决方案（含链码、启动脚本及SDK）.zip
- IPCC2020初赛题目-Stencil代码实现+项目说明.zip
- Java开发基于SpringCloud-Kubernetes的微服务架构实例（含源码）.zip
- JavaWeb前后端搜索服务系统-基于SpringBoot+Elasticsearch+SparkMLib开发（含源码+项目说明+实验报告）.zip
- Jenkins+Kubernetes搭建自动化部署平台指南（附源码）.zip
- JPEG图像压缩算法在STM32平台的实现（含源码+项目说明+主要算法介绍）.zip
- k8s和Argo工作流结合构建的安全扫描器系统设计源码+设计文档.zip
- Kaggle猫狗分类竞赛-基于PyTorch（准确率超过99%，含源码+项目说明+设计报告）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
