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 169 comments ( View all | Add 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
nuclear_smash	1759797531 using!! Report Comment
sundaee⠀⠀ꔫ	1759134030 ⠀⠀ᛝ⠀⸺⠀⠀⠀⠀⠀⠀using Report Comment
Mik3y :3	1758652316 Using Report Comment
SunBurst	1758195310 Using Report Comment
𝔊𝔥𝔬𝔰𝔱𝔦𝔢_𝔈𝔫𝔱𝔢𝔯𝔱𝔞𝔦𝔫𝔷	1757534308 Using!! Report Comment
broken teacup	1757324942 using Report Comment
Мizqy	1756584068 using Report Comment
˚₊· ͟͟͞͞➳❥ Evan Elise ⋆.ೃ࿔*:･	1755919518 using Report Comment
LOTUS_START	1755639269 using ! \(￣︶￣*\)) Report Comment
V3nusThree000	1755470592 Using Report Comment