【HTML——简易 飞机大战 小游戏（效果+代码）】

}

/* 爆炸图片 */

img.boom {

position: absolute;

animation: opa 1s;

}

@keyframes opa {

0% {

opacity: 1;

}

25% {

opacity: 0.5;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

/* prize */

.prize {

position: absolute;

width: 50px;

height: 50px;

font-size: 50px;

text-align: center;

line-height: 50px;

border: 1px dashed red;

color: red;

font-weight: bold;

animation: prize 1s infinite;

}

@keyframes prize {

0% {

transform: scale(1);

}

50% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

}

/* 得分板 */

.score {

position: absolute;

top: 0;

left: 0;

width: 70px;

height: 30px;

color: #fff;

font-size: 20px;

}

/* 记录得分 */

.record {

width: 60%;

height: 100px;

margin: 100px auto;

background: #000;

padding: 10px;

border: 4px double #fff;

color: #fff;

}

.record p {

height: 50px;

font-size: 40px;

font-weight: bold;

text-align: center;

color: skyblue;

}

/* 再来一次 */

.btn {

position: absolute;

bottom: 50px;

right: 0;

left: 0;

margin: auto;

width: 150px;

height: 40px;

text-align: center;

line-height: 40px;

color: #fff;

font-size: 20px;

font-weight: bold;

border-radius: 10px;

background: #000;

cursor: pointer;

}