HTML
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<div class="sky">
<div class="scorebar">
<style>
.topline-mario{position:absolute;}
.topline-world{position:absolute; left:55%;}
.topline-time{position:absolute; left: 85%;}
.bottomline-score{position:absolute; top: 90px;}
.bottomline-coin{position:absolute; top: 80px; left:30%;}
.bottomline-world{position:absolute; top: 90px; left:55.7%;}
.bottomline-time{position:absolute; top: 90px; left:85.5%;}
</style>
<p><span class="topline-mario">MARIO</span>
<span class="topline-world">WORLD</span>
<span class="topline-time">TIME</span>
<span class="bottomline-score">OOOOOO</span>
<span class="bottomline-coin"><img src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/Coin.gif" height="40px"> x OO</span>
<span class="bottomline-world">1 - 1</span>
<span class="bottomline-time">111</span>
</p>
</div>
<img class="cloud" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/CloudSingle.gif">
<img class="cloud" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/CloudDouble.gif">
<img class="cloud" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/CloudTriple.gif">
</div>
<div class="ground">
<div class="skyblocks">
<img class="brick" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/Bricks.gif" height="70px;">
<img class="brick" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/QuestionBlock.gif" height="70px;">
<img class="brick" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/Bricks.gif" height="70px;">
<img class="brick" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/Bricks.gif" height="70px;">
</div>
<img class="bush" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/BushSingle.gif" height="70px;">
<img class="bush" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/BushDouble.gif" height="70px;">
<img class="bush" src="https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/BushSingle.gif" height="70px;">
<div class="mario"></div>
</div>
CSS
html, body{
font-family: 'Press Start 2P', cursive;
height: 100%;
width: 100%;
overflow:hidden;
margin: 0;
padding: 0;
}
.sky, .ground{
position: relative; /*Because we want to position items on and in them!*/
}
.sky{
height: 90%;
background-color: #548CFF;
}
.ground{
height: 10%;
background-color: #C84C0C;
background-image: url('https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/groundblock.png');
}
.scorebar{
position: absolute;
height: 120px;
width:100%;
font-family: 'Press Start 2P', cursive;
font-size: 180%;
color: white;
padding-left: 50px;
padding-right: 50px;
line-height: 0.2;
}
.cloud{
position: absolute;
height: 100px;
}
.cloud:nth-child(2){
top: 120px;
-webkit-animation: wind 80s both infinite linear reverse;
animation: wind 80s both infinite linear reverse;
}
.cloud:nth-child(3){
top: 280px;
-webkit-animation: wind 50s both infinite linear reverse;
animation: wind 50s both infinite linear reverse;
}
.cloud:nth-child(4){
top: 450px;
-webkit-animation: wind 30s both infinite linear reverse;
animation: wind 30s both infinite linear reverse;
}
.skyblocks{
position: absolute;
top: -250px;
}
.brick{
position: fixed;
margin: -2px;
}
.brick:nth-child(1){
left:600px;
}
.brick:nth-child(2){
left:670px;
}
.brick:nth-child(3){
left:740px;
}
.brick:nth-child(4){
left:810px;
}
.bush{
position: absolute;
top:-70px;
}
.bush:nth-child(1){
left: 150px;
}
.bush:nth-child(2){
left: 900px;;
}
.bush:nth-child(3){
left: 1500px;;
}
.mario{
position: absolute;
width: 71px;
height: 72px;
background: url('https://raw.githubusercontent.com/LantareCode/CSS-SuperMario-Animation/master/images/mariowalking/result.png') left center;
top:-70px;
left:0px;
-webkit-animation: play 0.8s steps(4) infinite,
run 7s both infinite linear;
animation: play 0.8s steps(4) infinite,
run 7s both infinite linear;
}
@-webkit-keyframes play{
100%{background-position: -284px;}
}
@keyframes play{
100%{background-position: -284px;}
}
@-webkit-keyframes run{
from{left: -200px;}
to{left: 100%;}
}
@keyframes run{
from{left: -200px;}
to{left: 100%;}
}
@-webkit-keyframes wind{
from{left: -300px;}
to{left: 100%;}
}
@keyframes wind{
from{left: -300px;}
to{left: 100%;}
}
1 Response