.1 | <?php $size = intval($_GET['size']??20);$chime=(intval($_GET['t']??20)); ?>
.2 | <!DOCTYPE html><html><meta name="viewport" content="width=device-width, initial-scale=1"><head><style>
.3 | html{background:#dfd;font-family:monospace}.x{font-family:serif}
.4 | a{color:#08f}a:visited{color:#f0f}
.5 | .r{width:5em;height:1.25em;font-family:serif;
.6 | background:#040;color:lime;font-size:<?php echo $size; ?>px;
.7 | position:relative;
.8 | border-bottom:8px solid #930}
.9 | /* Setup classes for different speeds */
10 | <?php
11 |
12 |
13 | for($i=0;$i<3;$i++){echo'.c'.$i.'{animation:v 300s linear infinite;animation-delay:'.(($chime%300)-($i*100)-99).'s;opacity:0;font-size:0.1px}';}
14 | for($i=0;$i<10;$i++){echo'.b'.$i.'{animation: t 100s linear infinite;animation-delay:'.(($chime%100)-9)-($i*10).'s;opacity:0;font-size:0.1px}';}
15 | for($i=0;$i<10;$i++){echo'.a'.$i.'{animation:t 10s linear infinite;animation-delay:'.(($chime%10)-$i).'s;opacity:0;font-size:0.1px}';} ?>
16 |
17 | <?php
18 | $t='
19 | /*Change numbers, tks to experimentation or math*/
20 | @keyframes s{
21 | 0%{opacity:0;font-size:0.1px}
22 | 0.0001%{opacity:0;font-size:'.$size.'px}
23 | 0.0002%{opacity:1;font-size:'.$size.'px}
24 | 99.9998%{opacity:1;font-size:'.$size.'px}
25 | 99.9999%{opacity:0;font-size:'.$size.'px}}
26 | @keyframes t{
27 | 0%{opacity:0;font-size:0.1px}
28 | 0.0001%{opacity:0;font-size:'.$size.'px}
29 | 0.0002%{opacity:1;font-size:'.$size.'px}
30 | 10.0001%{opacity:1;font-size:'.$size.'px}
31 | 10.0002%{opacity:0;font-size:'.$size.'px}
32 | 10.0003%{opacity:0;font-size:0.1px}}
33 | @keyframes v{
34 | 0%{opacity:0;font-size:0.1px}
35 | 0.0001%{opacity:0;font-size:'.$size.'px}
36 | 0.0002%{opacity:1;font-size:'.$size.'px}
37 | 33.3332%{opacity:1;font-size:'.$size.'px}
38 | 33.3333%{opacity:0;font-size:'.$size.'px}
39 | 33.3334%{opacity:0;font-size:0.1px}}
40 | '; if(empty($_GET['hide'])){echo$t;}else{echo str_replace("20px","180px;color:#000",$t);}?>
41 | </style></head><body>
42 | <div style="background:#8f8;margin:3em;display:inline-block;padding:0.3em;max-width:72em"><div class="r"> <?php
43 | for($i=0;$i<3;$i++){echo'<span class="c'.$i.'">'.($i).'</span>';}
44 | for($i=0;$i<10;$i++){echo'<span class="b'.$i.'">'.($i).'</span>';}
45 | for($i=0;$i<10;$i++){echo'<span class="a'.$i.'">'.($i).'</span>';} ?></div>
46 | <?php
47 | if(empty($_GET['size'])||isset($_GET['size'])&&$_GET['size']==20){$change = '<a href="x1.php?size=150&t='.($_GET['t'] ?? 60 ).'">go big</a>';}else{$change = '<a href="x1.php?size=20&t='.($_GET['t'] ?? 60 ).'">go to a normal size</a>';}
48 |
49 | if(empty($_GET['hide'])){echo'An experimental coutdown with only CSS, set by PHP. Took numerous edits to code, but can run without JS (try disabling JS briefly). Feel free to <a href="source.php?f=x1.php">view the source</a>, or '.$change;} ?>
50 | </div></body></html>