114 lines
1.7 KiB
CSS
114 lines
1.7 KiB
CSS
body {
|
|
background: url('./images/nuit.jpg');
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sol {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 40px;
|
|
width: 100vw;
|
|
background: url('./images/herbe.jpg') -100px;
|
|
}
|
|
|
|
#canon {
|
|
width: 50px;
|
|
position: fixed;
|
|
bottom: 35px;
|
|
left: 10px;
|
|
}
|
|
|
|
.projectile {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #ccc;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
}
|
|
|
|
.alien {
|
|
position: fixed;
|
|
width: 96px;
|
|
height: 96px;
|
|
background: url('./images/alien.png')
|
|
}
|
|
|
|
@keyframes explosionJaune {
|
|
from {
|
|
opacity: 100;
|
|
width: 0;
|
|
height: 0;
|
|
margin-left: 75px;
|
|
margin-top: 75px;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
width: 150px;
|
|
margin-left: 0px;
|
|
margin-top: 0;
|
|
height: 150px;
|
|
}
|
|
}
|
|
|
|
@keyframes explosionOrange {
|
|
from {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
to {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
|
|
@keyframes explosionRouge {
|
|
from {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
to {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
}
|
|
|
|
.explosion {
|
|
position: fixed;
|
|
}
|
|
|
|
.explosion-jaune {
|
|
background: yellow;
|
|
width: 0;
|
|
height: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
animation-name: explosionJaune;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.explosion-orange {
|
|
background: orange;
|
|
width: 0;
|
|
height: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 50%;
|
|
animation-name: explosionOrange;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.explosion-rouge {
|
|
background: red;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
animation-name: explosionRouge;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: 1;
|
|
}
|