Diagonal Falling Stars

Tags: stars, cosmic, space, simple, animation

Description:

Difficult to display a animation, but this adds yellow diagonally falling stars to your profile!! It's also set up so if you want to you can make it so it's two separate colors of stars :33

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by averageGamester (https://layouts.spacehey.com/layout?id=100785) -->

<img class="star yellow one"/>
<img class="star yellow two"/>
<img class="star yellow three"/>
<img class="star yellow four"/>
<img class="star yellow five"/>
<img class="star blue six"/>
<img class="star blue seven"/>
<img class="star blue eight"/>
<img class="star blue nine"/>
<img class="star blue ten"/>

<style>
.star {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
z-index: 2 !important;
filter: hue-rotate(160deg);
top: -180px;
position:absolute;
height: 50px;
width: 50px;
content: url("https://enchantments.carrd.co/assets/images/gallery17/1dee4d0c.gif?v=7116bf41");
animation: fallingstars 20s linear infinite;
}
.star.yellow {
left: 10%;
}
@keyframes fallingstars {
 0% {transform:  translate(0%, 10%); display:default;}
 50% {transform:  translate(11000%, 12000%); display:default;}
 51% {transform:  translate(0%, 0%); display:none;}
 100% {transform:  translate(0%, 0%); display:none;}
}

.star.yellow.one {
left: 90%;
animation-delay: 10s;
}
.star.blue.six {
left: 0%;
animation-delay: 6s;
}
.star.yellow.two {
left: 10%;
animation-delay: 15s;
}
.star.blue.seven {
left: 20%;
animation-delay: 7s;
}
.star.yellow.three {
left: 30%;
animation-delay: 2s;
}
.star.blue.eight {
left: 40%;
animation-delay: 7s;
}
.star.yellow.four {
left: 50%;
animation-delay: 9s;
}
.star.blue.nine {
left: 60%;
animation-delay: 12s;
}
.star.yellow.five {
left: 70%;
animation-delay: 11s;
}
.star.blue.ten {
left: 80%;
animation-delay: 18s;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 191 comments ( View all | Add Comment )

Athemys	1778880361 using!! Report Comment
Asylis	1778773741 using - Report Comment
୧ ‧₊˚dafnee ₊˚⊹☆	1777140193 USANDODODO Report Comment
Jess4ever	1775989575 usingg Report Comment
Sweaded	1775497065 USINGG Report Comment
PAO_PUFF•¨•.¸¸☆🦢	1775381525 using! Report Comment
thebagelofthebagels	1775103494 useinggg Report Comment
LEN-Z🍭	1774871097 usinggg! Report Comment
Lingyloop!	1773939304 usingggg! Report Comment
suisei	1773235529 using Report Comment
𝓹𝓲𝓴𝓼𝓲	1772995101 using <333 Report Comment
ろg!e	1771588432 using Report Comment
⋆. 𐙚 ˚	1771342314 Using! Report Comment
frank1e ▀▄▀▄▀▄▀▄▀▄▀▄	1769818394 usingg Report Comment
Illium_.(^_-)ﾉ	1768304864 usinggg Report Comment
From.the.Moon	1767221523 Using :D Report Comment
CosmicCache	1766417256 usingg Report Comment
Ivy Moth Berry	1766200077 using! Report Comment
Camp!	1766103447 usin!!! Report Comment
tori datura	1766081019 using!!! Report Comment