[html]
<style>
#g{position:relative;height:300px;max-width:700px;overflow:hidden;border:2px solid #8a4b12;border-radius:8px;background:transparent;font-family:Georgia,serif;user-select:none;-webkit-user-select:none;counter-reset:ok 0 bad 0}
#g .lf{position:absolute;top:-40px;font-size:26px;line-height:1;cursor:pointer;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
#g .or{font-size:35px}
#g .or.a{animation-name:ov,s1}
#g .or.b{animation-name:ov,s2}
#g .or.c{animation-name:ov,s3}
#g .gr{animation-name:gv,sg;animation-direction:normal}
#g .lf input{position:absolute;opacity:0;width:0;height:0}
#g .lf:has(input:checked){visibility:hidden;pointer-events:none}
#g .gr input:checked{counter-increment:ok}
#g .or input:checked{counter-increment:bad}
#g .sc{position:absolute;top:0;left:0;right:0;height:34px;line-height:34px;padding:0 10px;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:16px;font-weight:bold;color:#fff;background:#8a4b12;z-index:5}
#g .ok::after{content:counter(ok)}
#g .bad::after{content:counter(bad)}
#g .msg,#g .lose{display:none;position:absolute;top:0;left:0;right:0;height:34px;line-height:34px;padding:0 6px;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-align:center;font-size:18px;font-weight:bold;color:#fff;background:#8a4b12}
#g .msg{z-index:6}
#g .lose{z-index:7}
#g .w{display:none;position:absolute;top:-40px;font-size:38px;line-height:1;pointer-events:none;animation-timing-function:linear;animation-iteration-count:infinite;filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
#g .w.a{animation-name:wa}
#g .w.b{animation-name:wb}
#g:has(.g1:checked):has(.g2:checked):has(.g3:checked):has(.g4:checked):has(.g5:checked):has(.g6:checked):has(.g7:checked):has(.g8:checked):has(.g9:checked):has(.g10:checked):has(.g11:checked):has(.g12:checked):has(.g13:checked):has(.g14:checked):has(.g15:checked) .hd{display:none}
#g:has(.g1:checked):has(.g2:checked):has(.g3:checked):has(.g4:checked):has(.g5:checked):has(.g6:checked):has(.g7:checked):has(.g8:checked):has(.g9:checked):has(.g10:checked):has(.g11:checked):has(.g12:checked):has(.g13:checked):has(.g14:checked):has(.g15:checked) .msg{display:block}
#g:has(.g1:checked):has(.g2:checked):has(.g3:checked):has(.g4:checked):has(.g5:checked):has(.g6:checked):has(.g7:checked):has(.g8:checked):has(.g9:checked):has(.g10:checked):has(.g11:checked):has(.g12:checked):has(.g13:checked):has(.g14:checked):has(.g15:checked) .w{display:block}
#g#g:is(:has(.o1:checked):has(.o2:checked):has(.o3:checked),:has(.o1:checked):has(.o2:checked):has(.o4:checked),:has(.o1:checked):has(.o2:checked):has(.o5:checked),:has(.o1:checked):has(.o2:checked):has(.o6:checked),:has(.o1:checked):has(.o2:checked):has(.o7:checked),:has(.o1:checked):has(.o2:checked):has(.o8:checked),:has(.o1:checked):has(.o2:checked):has(.o9:checked),:has(.o1:checked):has(.o2:checked):has(.o10:checked),:has(.o1:checked):has(.o3:checked):has(.o4:checked),:has(.o1:checked):has(.o3:checked):has(.o5:checked),:has(.o1:checked):has(.o3:checked):has(.o6:checked),:has(.o1:checked):has(.o3:checked):has(.o7:checked),:has(.o1:checked):has(.o3:checked):has(.o8:checked),:has(.o1:checked):has(.o3:checked):has(.o9:checked),:has(.o1:checked):has(.o3:checked):has(.o10:checked),:has(.o1:checked):has(.o4:checked):has(.o5:checked),:has(.o1:checked):has(.o4:checked):has(.o6:checked),:has(.o1:checked):has(.o4:checked):has(.o7:checked),:has(.o1:checked):has(.o4:checked):has(.o8:checked),:has(.o1:checked):has(.o4:checked):has(.o9:checked),:has(.o1:checked):has(.o4:checked):has(.o10:checked),:has(.o1:checked):has(.o5:checked):has(.o6:checked),:has(.o1:checked):has(.o5:checked):has(.o7:checked),:has(.o1:checked):has(.o5:checked):has(.o8:checked),:has(.o1:checked):has(.o5:checked):has(.o9:checked),:has(.o1:checked):has(.o5:checked):has(.o10:checked),:has(.o1:checked):has(.o6:checked):has(.o7:checked),:has(.o1:checked):has(.o6:checked):has(.o8:checked),:has(.o1:checked):has(.o6:checked):has(.o9:checked),:has(.o1:checked):has(.o6:checked):has(.o10:checked),:has(.o1:checked):has(.o7:checked):has(.o8:checked),:has(.o1:checked):has(.o7:checked):has(.o9:checked),:has(.o1:checked):has(.o7:checked):has(.o10:checked),:has(.o1:checked):has(.o8:checked):has(.o9:checked),:has(.o1:checked):has(.o8:checked):has(.o10:checked),:has(.o1:checked):has(.o9:checked):has(.o10:checked),:has(.o2:checked):has(.o3:checked):has(.o4:checked),:has(.o2:checked):has(.o3:checked):has(.o5:checked),:has(.o2:checked):has(.o3:checked):has(.o6:checked),:has(.o2:checked):has(.o3:checked):has(.o7:checked),:has(.o2:checked):has(.o3:checked):has(.o8:checked),:has(.o2:checked):has(.o3:checked):has(.o9:checked),:has(.o2:checked):has(.o3:checked):has(.o10:checked),:has(.o2:checked):has(.o4:checked):has(.o5:checked),:has(.o2:checked):has(.o4:checked):has(.o6:checked),:has(.o2:checked):has(.o4:checked):has(.o7:checked),:has(.o2:checked):has(.o4:checked):has(.o8:checked),:has(.o2:checked):has(.o4:checked):has(.o9:checked),:has(.o2:checked):has(.o4:checked):has(.o10:checked),:has(.o2:checked):has(.o5:checked):has(.o6:checked),:has(.o2:checked):has(.o5:checked):has(.o7:checked),:has(.o2:checked):has(.o5:checked):has(.o8:checked),:has(.o2:checked):has(.o5:checked):has(.o9:checked),:has(.o2:checked):has(.o5:checked):has(.o10:checked),:has(.o2:checked):has(.o6:checked):has(.o7:checked),:has(.o2:checked):has(.o6:checked):has(.o8:checked),:has(.o2:checked):has(.o6:checked):has(.o9:checked),:has(.o2:checked):has(.o6:checked):has(.o10:checked),:has(.o2:checked):has(.o7:checked):has(.o8:checked),:has(.o2:checked):has(.o7:checked):has(.o9:checked),:has(.o2:checked):has(.o7:checked):has(.o10:checked),:has(.o2:checked):has(.o8:checked):has(.o9:checked),:has(.o2:checked):has(.o8:checked):has(.o10:checked),:has(.o2:checked):has(.o9:checked):has(.o10:checked),:has(.o3:checked):has(.o4:checked):has(.o5:checked),:has(.o3:checked):has(.o4:checked):has(.o6:checked),:has(.o3:checked):has(.o4:checked):has(.o7:checked),:has(.o3:checked):has(.o4:checked):has(.o8:checked),:has(.o3:checked):has(.o4:checked):has(.o9:checked),:has(.o3:checked):has(.o4:checked):has(.o10:checked),:has(.o3:checked):has(.o5:checked):has(.o6:checked),:has(.o3:checked):has(.o5:checked):has(.o7:checked),:has(.o3:checked):has(.o5:checked):has(.o8:checked),:has(.o3:checked):has(.o5:checked):has(.o9:checked),:has(.o3:checked):has(.o5:checked):has(.o10:checked),:has(.o3:checked):has(.o6:checked):has(.o7:checked),:has(.o3:checked):has(.o6:checked):has(.o8:checked),:has(.o3:checked):has(.o6:checked):has(.o9:checked),:has(.o3:checked):has(.o6:checked):has(.o10:checked),:has(.o3:checked):has(.o7:checked):has(.o8:checked),:has(.o3:checked):has(.o7:checked):has(.o9:checked),:has(.o3:checked):has(.o7:checked):has(.o10:checked),:has(.o3:checked):has(.o8:checked):has(.o9:checked),:has(.o3:checked):has(.o8:checked):has(.o10:checked),:has(.o3:checked):has(.o9:checked):has(.o10:checked),:has(.o4:checked):has(.o5:checked):has(.o6:checked),:has(.o4:checked):has(.o5:checked):has(.o7:checked),:has(.o4:checked):has(.o5:checked):has(.o8:checked),:has(.o4:checked):has(.o5:checked):has(.o9:checked),:has(.o4:checked):has(.o5:checked):has(.o10:checked),:has(.o4:checked):has(.o6:checked):has(.o7:checked),:has(.o4:checked):has(.o6:checked):has(.o8:checked),:has(.o4:checked):has(.o6:checked):has(.o9:checked),:has(.o4:checked):has(.o6:checked):has(.o10:checked),:has(.o4:checked):has(.o7:checked):has(.o8:checked),:has(.o4:checked):has(.o7:checked):has(.o9:checked),:has(.o4:checked):has(.o7:checked):has(.o10:checked),:has(.o4:checked):has(.o8:checked):has(.o9:checked),:has(.o4:checked):has(.o8:checked):has(.o10:checked),:has(.o4:checked):has(.o9:checked):has(.o10:checked),:has(.o5:checked):has(.o6:checked):has(.o7:checked),:has(.o5:checked):has(.o6:checked):has(.o8:checked),:has(.o5:checked):has(.o6:checked):has(.o9:checked),:has(.o5:checked):has(.o6:checked):has(.o10:checked),:has(.o5:checked):has(.o7:checked):has(.o8:checked),:has(.o5:checked):has(.o7:checked):has(.o9:checked),:has(.o5:checked):has(.o7:checked):has(.o10:checked),:has(.o5:checked):has(.o8:checked):has(.o9:checked),:has(.o5:checked):has(.o8:checked):has(.o10:checked),:has(.o5:checked):has(.o9:checked):has(.o10:checked),:has(.o6:checked):has(.o7:checked):has(.o8:checked),:has(.o6:checked):has(.o7:checked):has(.o9:checked),:has(.o6:checked):has(.o7:checked):has(.o10:checked),:has(.o6:checked):has(.o8:checked):has(.o9:checked),:has(.o6:checked):has(.o8:checked):has(.o10:checked),:has(.o6:checked):has(.o9:checked):has(.o10:checked),:has(.o7:checked):has(.o8:checked):has(.o9:checked),:has(.o7:checked):has(.o8:checked):has(.o10:checked),:has(.o7:checked):has(.o9:checked):has(.o10:checked),:has(.o8:checked):has(.o9:checked):has(.o10:checked)){.lose{display:block}.hd,.w,.msg{display:none}}
@keyframes ov{0%{translate:0 0}100%{translate:0 285px}}
@keyframes gv{0%{translate:0 0}20%{translate:0 285px}40%{translate:0 0}100%{translate:0 0}}
@keyframes s1{0%{transform:translateX(-35px) rotate(-20deg)}25%{transform:translateX(35px) rotate(20deg)}50%{transform:translateX(-35px) rotate(-20deg)}75%{transform:translateX(35px) rotate(20deg)}100%{transform:translateX(-35px) rotate(-20deg)}}
@keyframes s2{0%{transform:translateX(45px) rotate(25deg)}20%{transform:translateX(-45px) rotate(-25deg)}40%{transform:translateX(45px) rotate(25deg)}60%{transform:translateX(-45px) rotate(-25deg)}80%{transform:translateX(45px) rotate(25deg)}100%{transform:translateX(-45px) rotate(-25deg)}}
@keyframes s3{0%{transform:translateX(-25px) rotate(-15deg)}17%{transform:translateX(25px) rotate(15deg)}33%{transform:translateX(-25px) rotate(-15deg)}50%{transform:translateX(25px) rotate(15deg)}67%{transform:translateX(-25px) rotate(-15deg)}83%{transform:translateX(25px) rotate(15deg)}100%{transform:translateX(-25px) rotate(-15deg)}}
@keyframes sg{0%{transform:translateX(-40px) rotate(-25deg)}8.3%{transform:translateX(40px) rotate(25deg)}16.7%{transform:translateX(-40px) rotate(-25deg)}25%{transform:translateX(40px) rotate(25deg)}33.3%{transform:translateX(-40px) rotate(-25deg)}41.7%{transform:translateX(40px) rotate(25deg)}50%{transform:translateX(-40px) rotate(-25deg)}58.3%{transform:translateX(40px) rotate(25deg)}66.7%{transform:translateX(-40px) rotate(-25deg)}75%{transform:translateX(40px) rotate(25deg)}83.3%{transform:translateX(-40px) rotate(-25deg)}91.7%{transform:translateX(40px) rotate(25deg)}100%{transform:translateX(-40px) rotate(-25deg)}}
@keyframes wa{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(25px,70px) rotate(70deg)}40%{transform:translate(-20px,150px) rotate(-40deg)}60%{transform:translate(30px,220px) rotate(110deg)}80%{transform:translate(-15px,290px) rotate(20deg)}100%{transform:translate(10px,360px) rotate(180deg);opacity:0}}
@keyframes wb{0%{transform:translate(0,0) rotate(0)}15%{transform:translate(-30px,50px) rotate(-60deg)}35%{transform:translate(20px,130px) rotate(50deg)}55%{transform:translate(-25px,200px) rotate(-100deg)}75%{transform:translate(35px,270px) rotate(60deg)}100%{transform:translate(-10px,360px) rotate(-180deg);opacity:0}}
</style>
<div id="g">
<label class="hd lf gr p" style="left:8%;animation-duration:15s;animation-delay:0.3s"><input class="g1" type="checkbox">🍃</label>
<label class="hd lf or b" style="left:30%;animation-duration:4.5s;animation-delay:0.7s"><input class="o1" type="checkbox">🍁</label>
<label class="hd lf gr r" style="left:55%;animation-duration:17s;animation-delay:2s"><input class="g2" type="checkbox">🍃</label>
<label class="hd lf gr q" style="left:80%;animation-duration:14s;animation-delay:4s"><input class="g3" type="checkbox">🍃</label>
<label class="hd lf or c" style="left:18%;animation-duration:4s;animation-delay:2.2s"><input class="o2" type="checkbox">🍂</label>
<label class="hd lf gr p" style="left:42%;animation-duration:16s;animation-delay:6s"><input class="g4" type="checkbox">🍃</label>
<label class="hd lf gr q" style="left:68%;animation-duration:18s;animation-delay:8s"><input class="g5" type="checkbox">🍃</label>
<label class="hd lf or a" style="left:88%;animation-duration:5s;animation-delay:3.7s"><input class="o3" type="checkbox">🍁</label>
<label class="hd lf gr r" style="left:12%;animation-duration:14s;animation-delay:10s"><input class="g6" type="checkbox">🍃</label>
<label class="hd lf or c" style="left:36%;animation-duration:4.5s;animation-delay:4.7s"><input class="o4" type="checkbox">🍂</label>
<label class="hd lf gr p" style="left:60%;animation-duration:17s;animation-delay:12s"><input class="g7" type="checkbox">🍃</label>
<label class="hd lf gr q" style="left:78%;animation-duration:15s;animation-delay:1s"><input class="g8" type="checkbox">🍃</label>
<label class="hd lf or a" style="left:24%;animation-duration:4s;animation-delay:6.2s"><input class="o5" type="checkbox">🍁</label>
<label class="hd lf gr r" style="left:48%;animation-duration:16s;animation-delay:5s"><input class="g9" type="checkbox">🍃</label>
<label class="hd lf or b" style="left:72%;animation-duration:5s;animation-delay:7.2s"><input class="o6" type="checkbox">🍂</label>
<label class="hd lf gr p" style="left:6%;animation-duration:18s;animation-delay:9s"><input class="g10" type="checkbox">🍃</label>
<label class="hd lf gr q" style="left:84%;animation-duration:14s;animation-delay:11s"><input class="g11" type="checkbox">🍃</label>
<label class="hd lf or c" style="left:52%;animation-duration:4.5s;animation-delay:8.7s"><input class="o7" type="checkbox">🍁</label>
<label class="hd lf gr r" style="left:32%;animation-duration:15s;animation-delay:13s"><input class="g12" type="checkbox">🍃</label>
<label class="hd lf or b" style="left:92%;animation-duration:4s;animation-delay:9.7s"><input class="o8" type="checkbox">🍂</label>
<label class="hd lf gr p" style="left:64%;animation-duration:17s;animation-delay:3s"><input class="g13" type="checkbox">🍃</label>
<label class="hd lf or a" style="left:14%;animation-duration:4.5s;animation-delay:10.7s"><input class="o9" type="checkbox">🍁</label>
<label class="hd lf gr q" style="left:44%;animation-duration:16s;animation-delay:7s"><input class="g14" type="checkbox">🍃</label>
<label class="hd lf or c" style="left:76%;animation-duration:5s;animation-delay:11.7s"><input class="o10" type="checkbox">🍂</label>
<label class="hd lf gr r" style="left:26%;animation-duration:18s;animation-delay:14s"><input class="g15" type="checkbox">🍃</label>
<div class="hd sc">Поймано: <b class="ok"></b> из 15 | Ошибки: <b class="bad"></b> из 3</div>
<div class="msg">Победа! Теперь листопад правильный!</div>
<div class="lose">Проиграл, лопух! Обнови страницу</div>
<span class="w a" style="left:5%;animation-duration:8s;animation-delay:0s">🍁</span>
<span class="w b" style="left:14%;animation-duration:9s;animation-delay:2s">🍂</span>
<span class="w a" style="left:23%;animation-duration:7s;animation-delay:4s">🍁</span>
<span class="w b" style="left:32%;animation-duration:10s;animation-delay:1s">🍂</span>
<span class="w a" style="left:41%;animation-duration:8s;animation-delay:5s">🍁</span>
<span class="w b" style="left:50%;animation-duration:9s;animation-delay:3s">🍂</span>
<span class="w a" style="left:59%;animation-duration:7s;animation-delay:6s">🍁</span>
<span class="w b" style="left:68%;animation-duration:10s;animation-delay:0.5s">🍂</span>
<span class="w a" style="left:77%;animation-duration:8s;animation-delay:4.5s">🍁</span>
<span class="w b" style="left:86%;animation-duration:9s;animation-delay:2.5s">🍂</span>
<span class="w a" style="left:94%;animation-duration:7s;animation-delay:5.5s">🍁</span>
<span class="w b" style="left:19%;animation-duration:9s;animation-delay:7s">🍂</span>
<span class="w a" style="left:46%;animation-duration:10s;animation-delay:8s">🍁</span>
<span class="w b" style="left:72%;animation-duration:8s;animation-delay:1.5s">🍂</span>
</div>
[/html]

НА ФОРУМЕ НАБЛЮДАЮТСЯ ТЕХНИЧЕСКИЕ СБОИ!

Отредактировано Пасмурничек (Вчера 12:27:49)