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

˚₊‧꒰აKirbysmug໒꒱ ‧₊	1745176413 using :) Report Comment
𝙑𝙚𝙡𝙤𝙘𝙞𝙩𝙮☆	1744851251 USING! was also wondering if anyone knew how to change the star color? Was looking to change a few times green and blue, didn't work the way I tried initially Report Comment
smiley!!	1744253390 Using!! Report Comment
FRITOOOS	1743932981 using Report Comment
coolbimbo03<3	1743459605 using Report Comment
lucid_XX	1742575700 using!! Report Comment
LilyCookiesh	1742568037 using !! Report Comment
Mewe	1742407492 usinggg Report Comment
pawlygon	1742203534 USING! Report Comment
Annie!!	1742120638 USINGG Report Comment
MOXX	1741748715 using Report Comment
Recluso_Desonesto	1741736605 Usinggg :DDD Report Comment
Tsyuuna	1741181985 USSINGG Report Comment
Clownenjoyer	1740860084 using! Report Comment
Ambrose	1740537476 using Report Comment
Jae_Bas	1740467790 using!! Report Comment
angy ><	1740419940 using Report Comment
angy <>	1740307703 usingg Report Comment
Cl3mmy! $◕ ◡ ◕$ $Cl3mmy! $◕ ◡ ◕$'s profile picture$	1740197630 Usinggggggggggg‼️ tysm! Report Comment
starlfoo	1739028665 usinggg Report Comment