api.violets-purgatory.dev/resources/stars.html

85 lines
1.9 KiB
HTML
Raw Normal View History

2024-02-08 16:03:40 -06:00
<!-- div.star#starn${⬤}*8 -->
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<style>
.star {
position: fixed;
z-index: -2;
visibility: hidden;
font-size: 0.35rem;
width: 40px;
height: 40px;
background: radial-gradient(white, rgb(255, 255, 255, 0.5) 10%, transparent 50%);
}
.star:nth-of-type(1) {
animation: starAnim1 20s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(2) {
animation: starAnim2 27s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(3) {
animation: starAnim3 23s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(4) {
animation: starAnim4 39s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(5) {
animation: starAnim5 30s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(6) {
animation: starAnim6 15s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(7) {
animation: starAnim7 23s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
.star:nth-of-type(8) {
animation: starAnim8 18s linear;
animation-iteration-count: infinite;
animation-delay: 1s;
}
@keyframes starAnim1 {
0% {
top: -10vh;
right: 10vw;
visibility: visible;
}
100% {
top: 110vh;
right: 20vw;
}
}
</style>