锐客网

  1. 首页 > 睿知 > it技术 > >

HTML动画特效-小游戏(第三部)

IT知识动画动画特效

男儿欲遂平生志，五经勤向窗前读。这篇文章主要讲述HTML动画特效-小游戏(第三部)相关的知识，希望能为你提供帮助。
本章教你如何用html+css+js做一个跳跃逃离坍塌房子。

这次我们做动画特效，我们来整个小游戏！
我先把跳跃逃离坍塌房子运行结果放在下面

我们可以把html+css+js放在html文件里面，也就是把css和javascript放在index.html里面。
废话不多说我们先来讲解html的代码。
【HTML动画特效-小游戏(第三部)】我使用下面的 HTML 和 CSS 代码在网页上创建了游戏界面。html代码就是你所看到的六个div和class选择器组成的。
< div class="game">
< div class="player idle"> < /div>
< div class="buildings"> < /div>
< div class="road"> < /div>
< div class="score"> 分数: 0< /div>
< div class="msg"> 点击开始...< /div>
< /div>

当我们写好html代码后，我们使用下面的CSS后，我们就成功的在网页上搭建了游戏界面。
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,800& display=swap");
*, *::before, *::after
padding: 0;
margin: 0 auto;
box-sizing: border-box;


body
font-family: "Open Sans", sans-serif;
background-color: #111;
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;


.game
position: relative;
width: 960px;
height: 340px;
overflow: hidden;
background-image: linear-gradient(#001, #200);
box-shadow: 0 0 1em #fff1;


.score
position: absolute;
top: 0.5em;
left: 0.5em;


.msg
position: absolute;
top: 2em;
left: 50%;
font-size: 1.2em;
transform: translateX(-50%);
text-align: center;
transition: opacity 0.25s;

.msg.off
opacity: 0;


.player
position: absolute;
top: var(--player-y, 320px);
left: var(--player-x, 480px);
transform: translate(-100%, -100%);
width: 24px;
height: 24px;
background-size: contain;

.player.idle
background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-idle.gif");

.player.run
background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-run.gif");

.player.jump
background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-jump.gif");

.player.dead
background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/player-dead.gif");


.building
position: absolute;
bottom: 20px;
left: var(--building-x, 960px);
border: solid #0007;
border-width: 0 1px;

.building_fragment
position: absolute;
width: 25%;
height: 33.334%;
background-image: url("https://repo.bfw.wiki/bfwrepo/images/game/pao/building02.png");
background-size: 1600% 300%;
filter: hue-rotate(var(--hue));

.building_fragment:nth-child(4n+1)
left: 0%;
background-position-x: calc(var(--buildingImageX, 0%) + 0%);

.building_fragment:nth-child(4n+2)
left: 25%;
background-position-x: calc(var(--buildingImageX, 0%) + 6.25%);

.building_fragment:nth-child(4n+3)
left: 50%;
background-position-x: calc(var(--buildingImageX, 0%) + 12.5%);

.building_fragment:nth-child(4n+4)
left: 75%;
background-position-x: calc(var(--buildingImageX, 0%) + 18.75%);

.building_fragment:nth-child(n+1):nth-child(-n+4)
top: 0%;
background-position-y: 0%;

.building_fragment:nth-child(n+5):nth-child(-n+8)
top: 33.334%;
background-position-y: 50%;

.building_fragment:nth-child(n+9):nth-child(-n+12)
top: 66.668%;
background-position-y: 100%;

.building.destroy .building_fragment
z-index: 100;
-webkit-animation: destroy 1s ease-out forwards;
animation: destroy 1s ease-out forwards;

@-webkit-keyframes destroy
to
transform: translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
opacity: 0;


@keyframes destroy
to
transform: translateX(var(--tx)) translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
opacity: 0;


    推荐阅读


    上一篇：Windows 10系统重装U盘启动工具制作方法实例演示，windows11镜像下载地址

    下一篇：Linux 内核进程管理 - 进程优先级 ② ( prio 调度优先级 | static_prio 静态优先级 | normal_prio 正常优先级 | rt_priority 实时优先级 )