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 179 comments ( View all | Add Comment )

ㅤ ׅ 𝄂𝄚𝅦𝄚𝄞𝅄ㅤ	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
(click on me XD) SM1L33_D1NO	1766016199 using (wish it was rainbow) Report Comment
Evie☄️	1765964482 Usingg!! Report Comment
berry!!	1765627245 Using!! Report Comment
H0NEYCARAM3L	1765329546 using!! Report Comment
Cyb3r G0bl1n	1765192069 using!!! Report Comment
Sami 𐔌՞ ܸ.ˬ.ܸ՞𐦯	1764671217 Using!!! Report Comment
₊˚✦ PLAZUMA ₊	1764421132 wowie so cooll! Report Comment
Fuckin cute	1764334397 so cool! thanks! using Report Comment
sarah*✧･ﾟ	1763239463 using! Report Comment
DDragonTheLoud	1761705304 using!! Report Comment
Dwellaqra	1760960656 Using! Report Comment
Dreamy<3Laura	1760529740 using Report Comment
jaxywaxy	1759942275 using this :33!!! Report Comment