پیشنمایش زنده
کد HTML
<div class="loader">
<div class="fire">
<div class="ball" style="--n: 0.8865"></div>
<div class="ball" style="--n: 0.1355"></div>
<div class="ball" style="--n: 0.7449"></div>
<div class="ball" style="--n: 0.8842"></div>
<div class="ball" style="--n: 0.9783"></div>
<div class="ball" style="--n: 0.2639"></div>
<div class="ball" style="--n: 0.8008"></div>
<div class="ball" style="--n: 0.0349"></div>
<div class="ball" style="--n: 0.8160"></div>
<div class="ball" style="--n: 0.4397"></div>
<div class="ball" style="--n: 0.7457"></div>
<div class="ball" style="--n: 0.0481"></div>
<div class="ball" style="--n: 0.4100"></div>
<div class="ball" style="--n: 0.1041"></div>
<div class="ball" style="--n: 0.9967"></div>
<div class="ball" style="--n: 0.3815"></div>
<div class="ball" style="--n: 0.4520"></div>
<div class="ball" style="--n: 0.2286"></div>
<div class="ball" style="--n: 0.8291"></div>
<div class="ball" style="--n: 0.9617"></div>
<div class="ball" style="--n: 0.3374"></div>
<div class="ball" style="--n: 0.7277"></div>
<div class="ball" style="--n: 0.8969"></div>
<div class="ball" style="--n: 0.3096"></div>
<div class="ball" style="--n: 0.3860"></div>
<div class="ball" style="--n: 0.2347"></div>
<div class="ball" style="--n: 0.4591"></div>
<div class="ball" style="--n: 0.0450"></div>
<div class="ball" style="--n: 0.0815"></div>
<div class="ball" style="--n: 0.9100"></div>
<div class="ball" style="--n: 0.9737"></div>
<div class="ball" style="--n: 0.4185"></div>
<div class="ball" style="--n: 0.1508"></div>
<div class="ball" style="--n: 0.9323"></div>
<div class="ball" style="--n: 0.0341"></div>
<div class="ball" style="--n: 0.8304"></div>
<div class="ball" style="--n: 0.3449"></div>
<div class="ball" style="--n: 0.3398"></div>
<div class="ball" style="--n: 0.0458"></div>
<div class="ball" style="--n: 0.0326"></div>
<div class="ball" style="--n: 0.5843"></div>
<div class="ball" style="--n: 0.1483"></div>
<div class="ball" style="--n: 0.3297"></div>
<div class="ball" style="--n: 0.2765"></div>
<div class="ball" style="--n: 0.1764"></div>
<div class="ball" style="--n: 0.9811"></div>
<div class="ball" style="--n: 0.8625"></div>
<div class="ball" style="--n: 0.9378"></div>
<div class="ball" style="--n: 0.4417"></div>
<div class="ball" style="--n: 0.0425"></div>
<div class="ball" style="--n: 0.1440"></div>
<div class="ball" style="--n: 0.2503"></div>
<div class="ball" style="--n: 0.6050"></div>
<div class="ball" style="--n: 0.7947"></div>
<div class="ball" style="--n: 0.3677"></div>
<div class="ball" style="--n: 0.5063"></div>
<div class="ball" style="--n: 0.0301"></div>
<div class="ball" style="--n: 0.3217"></div>
<div class="ball" style="--n: 0.1559"></div>
<div class="ball" style="--n: 0.9862"></div>
<div class="ball" style="--n: 0.0212"></div>
<div class="ball" style="--n: 0.9632"></div>
<div class="ball" style="--n: 0.2334"></div>
<div class="ball" style="--n: 0.0241"></div>
<div class="ball" style="--n: 0.9374"></div>
<div class="ball" style="--n: 0.2286"></div>
<div class="ball" style="--n: 0.6427"></div>
<div class="ball" style="--n: 0.6731"></div>
<div class="ball" style="--n: 0.8664"></div>
<div class="ball" style="--n: 0.7627"></div>
<div class="ball" style="--n: 0.7768"></div>
<div class="ball" style="--n: 0.6954"></div>
<div class="ball" style="--n: 0.3915"></div>
<div class="ball" style="--n: 0.9714"></div>
<div class="ball" style="--n: 0.3935"></div>
<div class="ball" style="--n: 0.4859"></div>
<div class="ball" style="--n: 0.1976"></div>
<div class="ball" style="--n: 0.5246"></div>
<div class="ball" style="--n: 0.6430"></div>
<div class="ball" style="--n: 0.3265"></div>
<div class="ball" style="--n: 0.6532"></div>
<div class="ball" style="--n: 0.7922"></div>
<div class="ball" style="--n: 0.8988"></div>
<div class="ball" style="--n: 0.9969"></div>
<div class="ball" style="--n: 0.2227"></div>
<div class="ball" style="--n: 0.8205"></div>
<div class="ball" style="--n: 0.2930"></div>
<div class="ball" style="--n: 0.1042"></div>
<div class="ball" style="--n: 0.3598"></div>
<div class="ball" style="--n: 0.2926"></div>
<div class="ball" style="--n: 0.7555"></div>
<div class="ball" style="--n: 0.1403"></div>
<div class="ball" style="--n: 0.5981"></div>
<div class="ball" style="--n: 0.6467"></div>
<div class="ball" style="--n: 0.9956"></div>
<div class="ball" style="--n: 0.6911"></div>
<div class="ball" style="--n: 0.4679"></div>
<div class="ball" style="--n: 0.1181"></div>
<div class="ball" style="--n: 0.3470"></div>
<div class="ball" style="--n: 0.6709"></div>
</div>
<div class="blur">
<div style="--s: 0; --e: 25%; --p: 50px" class="line"></div>
<div style="--s: 25%; --e: 75%; --p: 10px" class="line"></div>
<div style="--s: 50%; --e: 87.5%; --p: 5px" class="line"></div>
<div style="--s: 75%; --e: 100%; --p: 1px" class="line"></div>
</div>
<div class="overlay"></div>
</div>
کد CSS
.loader {
position: relative;
height: 200px;
max-height: 80%;
aspect-ratio: 2/3;
}
.overlay {
position: absolute;
inset: -999px;
backdrop-filter: blur(7px) brightness(10);
}
.ball {
position: absolute;
bottom: 0;
--a: 32.02135;
--w: 24px;
--m: 10px;
--b: mod(var(--n) * var(--a), 1);
left: calc((100% - var(--w)) * var(--b));
width: var(--w);
height: var(--w);
background: radial-gradient(closest-side, #fff, #f50, #f00, #f300);
border-radius: 0% 100%;
translate: calc(-1 * var(--m)) 0;
animation:
ball-wee 2s calc(var(--n) * -2s) infinite linear,
ball-bf 1.756s calc(mod(var(--n) * 6, 1) * -1.232s) ease-in-out infinite;
}
@keyframes ball-wee {
from {
scale: 0;
opacity: 0;
}
5% {
opacity: 1;
}
15% {
scale: 1;
}
to {
left: calc(50% - var(--w) * 0.5 + (25%) * (var(--b) * 2 - 1));
bottom: calc(100% - 24px);
scale: 0;
rotation: 180deg;
}
}
@keyframes ball-bf {
50% {
translate: var(--m) 0;
}
}
.blur {
position: absolute;
inset: -999px;
z-index: 1;
pointer-events: none;
}
.line {
position: absolute;
inset: 0;
backdrop-filter: blur(var(--p));
mask: linear-gradient(0deg, #000 var(--s), #0000 var(--e));
}