<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background:#e2b29f;
font-size:120%;
padding:100px;
}
.rabbit {
width:5em;
height:3em;
background:#ffffff;
border-radius:70% 90% 60% 50%;
position:relative;
box-shadow: -0.2em 1em 0 -0.75em #b78e81;
-webkit-transform: rotate(0deg) translate(-2em,0);
-webkit-animation: hop 1s infinite linear;
z-index:1;
}
.rabbit:before {
content:"";
position:absolute;
width:1em;
height:1em;
background:white;
border-radius:100%;
top:0.5em;
left:-0.3em;
box-shadow:
4em 0.4em 0 -0.35em #3f3334,
0.5em 1em 0 white,
4em 1em 0 -0.3em white,
4em 1em 0 -0.3em white,
4em 1em 0 -0.4em white;;
-webkit-animation: kick 1s infinite linear;
}
.rabbit:after {
content:"";
position:absolute;
width:.75em;
height:2em;
background:white;
border-radius:50% 100% 0 0;
-webkit-transform: rotate(-30deg);
right:1em;
top:-1em;
border-top:1px solid #f7f5f4;
border-left: 1px solid #f7f5f4;
box-shadow:-0.5em 0em 0 -0.1em white;
}
.clouds {
background:white;
width:2em;
height:2em;
border-radius:100% 100% 0 0;
position:relative;
top:-5em;
opacity(0);
-webkit-transform: translate(0,0);
-webkit-animation: cloudy 1s infinite linear forwards;
box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white;
}
.clouds:before,:after {
content:'';
position:absolute;
box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white;
}
.clouds:before {
width:1.25em;
height:1.25em;
border-radius:100% 100% 0 100%;
background:white;
left:-30%;
bottom:0;
}
.clouds:after {
width:1.5em;
height:1.5em;
border-radius:100% 100% 100% 0;
background:white;
right:-30%;
bottom:0;
}
@-webkit-keyframes hop {
20% {
-webkit-transform: rotate(-10deg) translate(1em,-2em);
box-shadow: -0.2em 3em 0 -1em #b78e81;
}
40% {
-webkit-transform: rotate(10deg) translate(3em,-4em);
box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
}
60%,75% {
-webkit-transform: rotate(0) translate(4em,0);
box-shadow: -0.2em 1em 0 -0.75em #b78e81;
}
}
@-webkit-keyframes kick {
20%,50% {
box-shadow:
4em 0.4em 0 -0.35em #3f3334,
0.5em 1.5em 0 white,
4em 1.75em 0 -0.3em white,
4em 1.75em 0 -0.3em white,
4em 1.9em 0 -0.4em white;
}
40% {
box-shadow:
4em 0.4em 0 -0.35em #3f3334,
0.5em 2em 0 white,
4em 1.75em 0 -0.3em white,
4.2em 1.75em 0 -0.2em white,
4.4em 1.9em 0 -0.2em white;
}
}
@-webkit-keyframes cloudy {
40% {
opacity(0.75);
-webkit-transform: translate(-3em,0);
}
55% {
opacity: 0;
-webkit-transform: translate(-4em,0);
}
90% {
-webkit-transform: translate(0,0);
}
}
</style>
</head>
<body>
<div class="rabbit">
</div>
<div class="clouds">
</div>
</body>
</html>
分享到：
相关推荐
【H5小游戏：小兔子快快跑】 在当今数字化的时代，H5小游戏因其轻便、易分享的特点，深受用户喜爱。"小兔子快快跑"就是一款这样的游戏，旨在为玩家提供简单却有趣的休闲娱乐体验。游戏的核心玩法是通过点击屏幕，让...
小兔子快快跑游戏的核心机制很可能就是由一个不断运行的Game Loop来驱动。 6. **碰撞检测**：游戏中，小兔子与障碍物、食物等的碰撞检测是关键，这通常通过几何算法实现，例如矩形碰撞检测或更复杂的多边形碰撞检测...
在描述中提到的"小兔快跑.apk"和"是男人就挺100秒.apk"可能就是用这种技术实现的简单游戏。在"小兔快跑"游戏中，可能通过帧动画让兔子角色连续移动，模拟奔跑的效果；而在"是男人就挺100秒"这类挑战反应速度的游戏里...
HTML兔子快跑游戏是一款基于HTML、CSS和JavaScript技术的游戏。它的主要功能是让玩家控制一个小兔子在道路上奔跑，躲避障碍物，同时收集金币来提高分数。 1. 使用的技术： - HTML：用于创建游戏的基本结构，包括...
在“没有窝的小兔”这个游戏中，幼儿需要在追逐和躲避中练习快跑和钻的技能，而这些动作均在游戏中自然发生，不会让幼儿感到枯燥无味。 第二项教学目标是提高幼儿的三人合作游戏能力。在这个游戏中，孩子们需要两人...
- **反应能力**：通过"快跑"的环节，训练孩子们对音乐信号的快速反应能力。 2. **活动准备**： - **道具辅助**：使用狐狸和小兔的头饰，为角色扮演提供视觉提示，增加游戏的真实感。 - **音乐播放设备**：录音机...
【标题解析】：“聪明的小兔作文.doc”这个标题暗示了文档内容是一篇关于聪明小兔子的故事，可能以寓言或童话的形式展现，旨在通过小兔的智慧与大灰狼的较量来传达某些生活道理或者教育意义。在IT行业中，类似的标题...
聪聪有个特殊的本领，那就是跑步速度快若风驰电掣。小兔聪聪对这一特长感到无比自豪，常常在别的小动物面前炫耀。然而，这种骄傲自大的行为也让它逐渐失去了朋友们的信任和亲近。 一次森林赛跑大会上，聪聪的表现...
网页游戏源码合集，包括：植物大战僵尸、逼死强迫症、胸口碎大石、粉绿男女、打击者、黄金矿工、反腐小王子、转你妹、纸飞机、小兔子快快跑、跳跳狗、奇葩连连看、扫雷、开心消消乐、打老虎、气球砰砰砰、疯狂飙车、...
【教案名称】：中班体育活动《没有窝的小兔》 【教学目标】： 1. **运动技能**：通过游戏活动，培养幼儿快速跑步、灵活钻爬的能力，提高其身体敏捷性和反应速度。 2. **团队协作**：增强幼儿三人一组的合作能力，...
- **故事名称**：《小兔运南瓜》 - **教学目的**：通过故事讲述，培养学生的口语交际能力。 #### 2.2 故事情节 - **时间**：一个晴朗的早晨 - **地点**：小白兔的家附近及菜园 - **主要人物**： - 小白兔（欢欢）...
跑跑跑，小朋友快快跑。 通过这个教案，旨在通过寓教于乐的方式，让幼儿在游戏中自然而然地掌握“走、跑、爬、跳”四个汉字，同时享受运动的乐趣，培养他们的观察力、记忆力和团队合作能力，为他们的全面发展打下...
通过垫足走、蹲着走、慢走、快跑等一系列热身运动，以及后续的游戏环节，孩子们的身体得到了全面的锻炼，这对于他们基础运动技能的发展有着积极作用。 活动准备包括了若干个响罐和场地布置。响罐是活动的主要工具，...
8. 游戏设计一至三：切西瓜、小鸡捉虫（快速跑）、小兔采蘑菇 这些游戏强调身体运动，如快速跑、跳跃和平衡，有助于发展孩子们的身体协调性和平衡感，同时提升他们的反应速度和竞争意识。 9. 游戏设计一至三：拉大...
6. 团队合作与社会技能：游戏如“小兔采蘑菇”不仅训练幼儿钻过障碍物的能力，还通过共同解决问题（如如何过“树林”）来培养他们的合作精神和尝试精神。 7. 自然元素融入游戏：将自然环境和元素（如吹泡泡、观察...
在放松活动阶段，教师可以引导幼儿学一学小动物的动作，并让他们快速跑回家，发展他们的速度和反应能力。同时，教师也可以通过游戏和运动来发展幼儿的社会交往能力，如分享、合作和互助等。 「兔子和大灰狼」是一个...
**教案一：小兔搬家** 1. **活动目标**： - 练习双腿夹物跳的动作，发展腿部力量。 - 激发对体育活动的兴趣，享受游戏的乐趣。 2. **活动准备**： - 提供可乐瓶作为障碍物，塑料圈作为安全区，斜坡，杂物和录音...
- **执行游戏：** 当儿歌念完时，停留在两个孩子之间，这两个孩子松开手并向圆心跑去，模拟西瓜被切开的情景。 - **重复进行：** 游戏可多次重复进行，增加趣味性和参与度。 - **轮流担任：** 游戏进行一段时间后...
- 速度比较，小兔和小猫跑200米，用时越短速度越快。小兔用37秒，小猫用29秒，小猫快8秒。 - 减法应用，篮子和水果的总重量减去篮子的重量，即可得到水果的重量，即36千克减去2千克，水果重34千克。 以上内容是...
由于 ，这意味着小兔跑得更快，覆盖了更多的距离。 6. 收割机的问题中，比较两台机器的工作效率要看它们完成任务所需的时间。第一台收割机需1小时完成，第二台需 小时完成。由于 小于1，第二台机器用时更短，因此第...