85 lines
1.9 KiB
HTML
85 lines
1.9 KiB
HTML
|
<!-- 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>
|