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

vee 🌱	1793027627 using !! Report Comment
sunny	1793015358 using!! Report Comment
teah	1792203213 using!! Report Comment
Daani	1790147904 using Report Comment
crow	1787658361 using! <3 Report Comment
「 ✦ ℭ𝔬𝔫𝔫𝔢𝔯 ✦ 」	1787642296 Using Report Comment
WebsofDread	1787250888 using!! <3 Report Comment
bobobearz	1786926877 using uwu Report Comment
Mish	1786805680 Using !! Report Comment
amitaf	1786059514 Will use Report Comment
Emmi	1784267769 Using!!! Report Comment
₊✩‧₊M30WZ1YX3₊✩‧₊	1784105815 using!! Report Comment
-{Gigi}-	1783738079 using!! Report Comment
𝔂𝓪𝓶𝓮𝓵𝓪𝓱	1783421751 using!! Report Comment
illicxt	1783337064 Using Report Comment
genesis	1781852175 Using Report Comment
I love sniffing armpits	1780778916 using Report Comment
Isa	1779920164 using! Report Comment
daniii	1779782603 using Report Comment
Qu!x_Th3_W@nd3rer_	1779483410 using!! Report Comment