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

Nyx_TheWolf69	1714685480 Useingg :3 Report Comment
jiji!꩜	1714007896 using ! Report Comment
꧁⋆⁺₊☽𝐒𝐭𝐚𝐫𝐝𝐮𝐬𝐭 𝐎𝐰𝐥☾₊⁺⋆꧂	1713771568 Using! Report Comment
𐔌 . Karoliine ! ୧	1713735587 using! Report Comment
k☆xia	1713701662 using!! Report Comment
EliBott	1713597592 using Report Comment
☆CY4N1D3_P01S0N1NG☆ [kitty era]	1712964571 Using!!!!! Report Comment
Miicha	1712664361 Usin'g!!:33 Report Comment
Xx_I_luv_U_xX	1712585941 usiing!! Report Comment
★ Nagiwagi👍★	1712423692 Using!!! Report Comment
mikey ⟡ (jazz hands ^_^)	1712421895 USING! :3 Report Comment
AxhTonMorTon 𓊆ྀི︎𓊇ྀི	1712408117 USING :>>>> Report Comment
xXL3VI0xXz	1712274529 THIS IS SOOOOOO CUTE DEF USING Report Comment
Kat :3	1712222640 AAAA I LOVE THIS USING!!!! Report Comment
oliver<3	1712192753 using!! Report Comment
eugrnia	1712162884 Using! Report Comment
saasageyo	1712098518 USING! SO CUTE Report Comment
zoe	1711973423 Using Report Comment
zoe	1711973423 Using Report Comment
xX☆JAY☆Xx	1711958242 Using!! Report Comment