<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>In progress breakout game - CodePen</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
html,body {background:black url(http://bit.ly/bl-mamba);margin:0;cursor:none;}
.ball,.tail {position:fixed;border-radius:100%;}
.paddle {position:fixed;bottom:12%;border:2px solid white;border-radius:8px;z-index:100;}
.block {float:left;box-shadow:inset 0 0 0 1px black,inset 0 0 0 2px white;border-radius:2px;width:10%;height:20px;color:white;}
.wave {animation:wave .5s 1;}
/* ANIMATIONS */
@keyframes wave {
0%{box-shadow:0 0 0 0 transparent;}
15% {box-shadow:0 0 0 10px;background:transparent;}
100% {box-shadow:0 0 0 20px transparent;}
}
@keyframes floatOne {
0% {opacity:1;}
50% {opacity:1;background:transparent;}
100% {opacity:0;transform:translate3D(0,-20px,0) scale(.2);}
}
@keyframes floatTwo {
0% {opacity:1;}
50% {opacity:1;background:transparent;}
100% {opacity:0;transform:translate3D(0,-35px,0) scale(.1);}
}
@keyframes floatThree {
0% {opacity:1;}
50% {opacity:1;background:transparent;}
100% {opacity:0;transform:translate3D(0,-50px,0) scale(.3);}
}
@keyframes floatFour {
0% {opacity:1;}
50% {opacity:1;background:transparent;}
100% {opacity:0;transform:translate3D(0,-65px,0) scale(.1);}
}
@keyframes floatFive {
0% {opacity:1;}
50% {opacity:1;background:transparent;}
100% {opacity:0;transform:translate3D(0,-80px,0) scale(.2);}
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>
HTML5火球挡板碰撞动画游戏
4星 · 超过85%的资源 需积分: 9 192 浏览量
2014-10-17
15:31:05
上传
评论
收藏 5KB RAR 举报 
HTML5火球挡板碰撞动画游戏.rar （5个子文件） 
html5-breakout-game css 
style.css 1KB
index.html 609B js index.js 3KB prefixfree.min.js 6KB index2.html 2KB资源评论
qq_291190092015-06-28效果很给力啊，但是有点复杂的说
