<!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>
