diedVIPs

html knowhow

Fallende Sterne







Fallende Sterne

So sieht´s aus


Siehe den Hintergrund


Quellcode
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 120%;
transform: rotate(-45deg);
}

.star {
--star-color: var(--primary-color);
--star-tail-length: 6em;
--star-tail-height: 2px;
--star-width: calc(var(--star-tail-length) / 6);
--fall-duration: 9s;
--tail-fade-duration: var(--fall-duration);
position: absolute;
top: var(--top-offset);
left: 0;
width: var(--star-tail-length);
height: var(--star-tail-height);
color: var(--star-color);
background: linear-gradient(45deg, currentColor, transparent);
border-radius: 50%;
filter: drop-shadow(0 0 16px currentColor);
transform: translate3d(104em, 0, 0);
animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}
@media screen and (max-width: 750px) {
.star {
animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
}
}
.star:nth-child(1) {
--star-tail-length: 5.89em;
--top-offset: 13.44vh;
--fall-duration: 8.227s;
--fall-delay: 1.547s;
}
.star:nth-child(2) {
--star-tail-length: 6.91em;
--top-offset: 37.46vh;
--fall-duration: 6.489s;
--fall-delay: 2.327s;
}
.star:nth-child(3) {
--star-tail-length: 6.75em;
--top-offset: 86.84vh;
--fall-duration: 9.674s;
--fall-delay: 9.19s;
}
.star:nth-child(4) {
--star-tail-length: 5.63em;
--top-offset: 26.81vh;
--fall-duration: 9.743s;
--fall-delay: 6.798s;
}
.star:nth-child(5) {
--star-tail-length: 5.46em;
--top-offset: 19.24vh;
--fall-duration: 9.573s;
--fall-delay: 8.523s;
}
.star:nth-child(6) {
--star-tail-length: 5.5em;
--top-offset: 7.63vh;
--fall-duration: 9.859s;
--fall-delay: 3.362s;
}
.star:nth-child(7) {
--star-tail-length: 6.17em;
--top-offset: 55.26vh;
--fall-duration: 7.618s;
--fall-delay: 6.524s;
}
.star:nth-child(8) {
--star-tail-length: 7.06em;
--top-offset: 38.17vh;
--fall-duration: 10.716s;
--fall-delay: 9.217s;
}
.star:nth-child(9) {
--star-tail-length: 5.76em;
--top-offset: 85.68vh;
--fall-duration: 10.913s;
--fall-delay: 3.258s;
}
.star:nth-child(10) {
--star-tail-length: 6.15em;
--top-offset: 99.05vh;
--fall-duration: 10.871s;
--fall-delay: 8.785s;
}
.star:nth-child(11) {
--star-tail-length: 5.78em;
--top-offset: 9.21vh;
--fall-duration: 11.101s;
--fall-delay: 4.865s;
}
.star:nth-child(12) {
--star-tail-length: 5.27em;
--top-offset: 51.2vh;
--fall-duration: 6.47s;
--fall-delay: 8.769s;
}
.star:nth-child(13) {
--star-tail-length: 6.63em;
--top-offset: 76.21vh;
--fall-duration: 7.381s;
--fall-delay: 9.877s;
}
.star:nth-child(14) {
--star-tail-length: 7.16em;
--top-offset: 54.18vh;
--fall-duration: 8.899s;
--fall-delay: 4.198s;
}
.star:nth-child(15) {
--star-tail-length: 5.63em;
--top-offset: 27vh;
--fall-duration: 10.066s;
--fall-delay: 3.703s;
}
.star:nth-child(16) {
--star-tail-length: 7.3em;
--top-offset: 99.19vh;
--fall-duration: 10.642s;
--fall-delay: 3.091s;
}
.star:nth-child(17) {
--star-tail-length: 5.04em;
--top-offset: 86.51vh;
--fall-duration: 9.652s;
--fall-delay: 7.001s;
}
.star:nth-child(18) {
--star-tail-length: 5.49em;
--top-offset: 38.43vh;
--fall-duration: 7.076s;
--fall-delay: 0.141s;
}
.star:nth-child(19) {
--star-tail-length: 6.56em;
--top-offset: 89.85vh;
--fall-duration: 9.479s;
--fall-delay: 0.203s;
}
.star:nth-child(20) {
--star-tail-length: 6.2em;
--top-offset: 71.83vh;
--fall-duration: 10.739s;
--fall-delay: 7.05s;
}
.star:nth-child(21) {
--star-tail-length: 6.38em;
--top-offset: 17.12vh;
--fall-duration: 8.399s;
--fall-delay: 2.28s;
}
.star:nth-child(22) {
--star-tail-length: 7.37em;
--top-offset: 12.67vh;
--fall-duration: 7.237s;
--fall-delay: 6.687s;
}
.star:nth-child(23) {
--star-tail-length: 6.94em;
--top-offset: 43.52vh;
--fall-duration: 11.328s;
--fall-delay: 6.97s;
}
.star:nth-child(24) {
--star-tail-length: 5.05em;
--top-offset: 60.16vh;
--fall-duration: 8.169s;
--fall-delay: 5.697s;
}
.star:nth-child(25) {
--star-tail-length: 5.53em;
--top-offset: 11.67vh;
--fall-duration: 9.608s;
--fall-delay: 0.909s;
}
.star:nth-child(26) {
--star-tail-length: 5.91em;
--top-offset: 89.01vh;
--fall-duration: 6.401s;
--fall-delay: 2.109s;
}
.star:nth-child(27) {
--star-tail-length: 6.44em;
--top-offset: 56.3vh;
--fall-duration: 11.271s;
--fall-delay: 7.495s;
}
.star:nth-child(28) {
--star-tail-length: 6.38em;
--top-offset: 9.54vh;
--fall-duration: 7.832s;
--fall-delay: 3.439s;
}
.star:nth-child(29) {
--star-tail-length: 6.68em;
--top-offset: 90.22vh;
--fall-duration: 8.137s;
--fall-delay: 9.974s;
}
.star:nth-child(30) {
--star-tail-length: 6.64em;
--top-offset: 45vh;
--fall-duration: 10.303s;
--fall-delay: 1.263s;
}
.star:nth-child(31) {
--star-tail-length: 6.67em;
--top-offset: 21.67vh;
--fall-duration: 10.343s;
--fall-delay: 4.714s;
}
.star:nth-child(32) {
--star-tail-length: 5.85em;
--top-offset: 16.05vh;
--fall-duration: 6.835s;
--fall-delay: 3.571s;
}
.star:nth-child(33) {
--star-tail-length: 5.32em;
--top-offset: 9.58vh;
--fall-duration: 8.21s;
--fall-delay: 2.262s;
}
.star:nth-child(34) {
--star-tail-length: 7.09em;
--top-offset: 85.14vh;
--fall-duration: 9.141s;
--fall-delay: 1.514s;
}
.star:nth-child(35) {
--star-tail-length: 7.07em;
--top-offset: 73.46vh;
--fall-duration: 8.375s;
--fall-delay: 3.454s;
}
.star:nth-child(36) {
--star-tail-length: 5.93em;
--top-offset: 10.92vh;
--fall-duration: 11.126s;
--fall-delay: 0.302s;
}
.star:nth-child(37) {
--star-tail-length: 7.27em;
--top-offset: 12.71vh;
--fall-duration: 7.174s;
--fall-delay: 0.73s;
}
.star:nth-child(38) {
--star-tail-length: 6.76em;
--top-offset: 41.21vh;
--fall-duration: 7.177s;
--fall-delay: 9.102s;
}
.star:nth-child(39) {
--star-tail-length: 5.02em;
--top-offset: 82.48vh;
--fall-duration: 10.543s;
--fall-delay: 8.952s;
}
.star:nth-child(40) {
--star-tail-length: 6.77em;
--top-offset: 54.95vh;
--fall-duration: 8.314s;
--fall-delay: 8.033s;
}
.star:nth-child(41) {
--star-tail-length: 6.32em;
--top-offset: 19.62vh;
--fall-duration: 11.485s;
--fall-delay: 5.499s;
}
.star:nth-child(42) {
--star-tail-length: 6.25em;
--top-offset: 92.28vh;
--fall-duration: 6.148s;
--fall-delay: 5.675s;
}
.star:nth-child(43) {
--star-tail-length: 5.58em;
--top-offset: 84.33vh;
--fall-duration: 10.639s;
--fall-delay: 8.566s;
}
.star:nth-child(44) {
--star-tail-length: 6.89em;
--top-offset: 81.53vh;
--fall-duration: 10.929s;
--fall-delay: 7.492s;
}
.star:nth-child(45) {
--star-tail-length: 5.49em;
--top-offset: 61vh;
--fall-duration: 6.042s;
--fall-delay: 8.738s;
}
.star:nth-child(46) {
--star-tail-length: 5.81em;
--top-offset: 26.53vh;
--fall-duration: 7.377s;
--fall-delay: 8.01s;
}
.star:nth-child(47) {
--star-tail-length: 7.29em;
--top-offset: 75.22vh;
--fall-duration: 6.662s;
--fall-delay: 4.36s;
}
.star:nth-child(48) {
--star-tail-length: 5.29em;
--top-offset: 21.95vh;
--fall-duration: 9.242s;
--fall-delay: 3.976s;
}
.star:nth-child(49) {
--star-tail-length: 7.32em;
--top-offset: 57.41vh;
--fall-duration: 7.394s;
--fall-delay: 1.63s;
}
.star:nth-child(50) {
--star-tail-length: 6.8em;
--top-offset: 86.97vh;
--fall-duration: 11.205s;
--fall-delay: 1.734s;
}
.star::before, .star::after {
position: absolute;
content: "";
top: 0;
left: calc(var(--star-width) / -2);
width: var(--star-width);
height: 100%;
background: linear-gradient(45deg, transparent, currentColor, transparent);
border-radius: inherit;
animation: blink 2s linear infinite;
}
.star::before {
transform: rotate(45deg);
}
.star::after {
transform: rotate(-45deg);
}

@keyframes fall {
to {
transform: translate3d(-30em, 0, 0);
}
}
@keyframes tail-fade {
0%, 50% {
width: var(--star-tail-length);
opacity: 1;
}
70%, 80% {
width: 0;
opacity: 0.4;
}
100% {
width: 0;
opacity: 0;
}
}
@keyframes blink {
50% {
opacity: 0.6;
}
}



</style>
</head>

<body>
<div class="stars">
<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>
<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>
<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>
<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>
<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>
<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>
<div class="star"></div>
<div class="star"></div>
</div>

</body>

</html>





Kontakt    Datenschutz    Impressum