screenshots.gif

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex">
    <title>io-fx09</title>
    <meta name="author" content="iowen.cn">
    <style>
        @import url("https://fonts.geekzu.org/css?family=Press+Start+2P");
        *{margin:0;padding:0;box-sizing:border-box}
        *::-moz-selection{background:#fd5d8d;color:#f1034a;color:#270245}
        *::selection{background:#fd5d8d;color:#f1034a;color:#270245}
        html,body{width:100%;height:100%}
        body{position:relative;background:#000;overflow:hidden}
        body:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);z-index:500;mix-blend-mode:overlay;pointer-events:none}
        .noise{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:400;opacity:.8;pointer-events:none}
        .noise:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url("./img/noise.png");pointer-events:none}
        .noise-moving{opacity:1;z-index:450}
        .noise-moving:before{will-change:background-position;-webkit-animation:noise 1s infinite alternate;animation:noise 1s infinite alternate}
        .scanlines{position:fixed;left:0;top:0;width:100vw;height:100vh;pointer-events:none;z-index:300;opacity:.6;will-change:opacity;-webkit-animation:opacity 3s linear infinite;animation:opacity 3s linear infinite}
        .scanlines:before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.5) 51%);background-size:100% 4px;will-change:background,background-size;-webkit-animation:scanlines .2s linear infinite;animation:scanlines .2s linear infinite}
        .intro-wrap{position:fixed;top:0;left:0;font-family:'Press Start 2P',cursive;color:#fff;font-size:2rem;width:100vw;height:100vh;background:#2b52ff}
        .intro-wrap .noise:before{background-size:200%}
        .intro-wrap .play{position:absolute;left:2rem;top:2rem;will-change:text-shadow;-webkit-animation:rgbText 2s steps(9) 0s infinite alternate;animation:rgbText 2s steps(9) 0s infinite alternate}
        .intro-wrap .play .char{will-change:opacity;-webkit-animation:type 1.2s infinite alternate;animation:type 1.2s infinite alternate;-webkit-animation-delay:calc(60ms * var(--char-index));animation-delay:calc(60ms * var(--char-index))}
        .intro-wrap .time{position:absolute;right:2rem;top:2rem;will-change:text-shadow;-webkit-animation:rgbText 1s steps(9) 0s infinite alternate;animation:rgbText 1s steps(9) 0s infinite alternate}
        .intro-wrap .recordSpeed{position:absolute;left:2rem;bottom:2rem;will-change:text-shadow;-webkit-animation:rgbText 1s steps(9) 0s infinite alternate;animation:rgbText 1s steps(9) 0s infinite alternate}
        @-webkit-keyframes noise{0%,100%{background-position:0 0}
        10%{background-position:-5% -10%}
        20%{background-position:-15% 5%}
        30%{background-position:7% -25%}
        40%{background-position:20% 25%}
        50%{background-position:-25% 10%}
        60%{background-position:15% 5%}
        70%{background-position:0 15%}
        80%{background-position:25% 35%}
        90%{background-position:-10% 10%}
        }@keyframes noise{0%,100%{background-position:0 0}
        10%{background-position:-5% -10%}
        20%{background-position:-15% 5%}
        30%{background-position:7% -25%}
        40%{background-position:20% 25%}
        50%{background-position:-25% 10%}
        60%{background-position:15% 5%}
        70%{background-position:0 15%}
        80%{background-position:25% 35%}
        90%{background-position:-10% 10%}
        }@-webkit-keyframes opacity{0%{opacity:.6}
        20%{opacity:.3}
        35%{opacity:.5}
        50%{opacity:.8}
        60%{opacity:.4}
        80%{opacity:.7}
        100%{opacity:.6}
        }@keyframes opacity{0%{opacity:.6}
        20%{opacity:.3}
        35%{opacity:.5}
        50%{opacity:.8}
        60%{opacity:.4}
        80%{opacity:.7}
        100%{opacity:.6}
        }@-webkit-keyframes scanlines{from{background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.5) 51%);background-size:100% 4px}
        to{background:linear-gradient(to bottom,rgba(0,0,0,0.5) 50%,transparent 51%);background-size:100% 4px}
        }@keyframes scanlines{from{background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,0.5) 51%);background-size:100% 4px}
        to{background:linear-gradient(to bottom,rgba(0,0,0,0.5) 50%,transparent 51%);background-size:100% 4px}
        }@-webkit-keyframes rgbText{0%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),0px 0 1px rgba(251,0,231,0.8),0 0px 3px rgba(0,233,235,0.8),0px 0 3px rgba(0,242,14,0.8),0 0px 3px rgba(244,45,0,0.8),0px 0 3px rgba(59,0,226,0.8)}
        25%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),0px 0 1px rgba(251,0,231,0.8),0 0px 3px rgba(0,233,235,0.8),0px 0 3px rgba(0,242,14,0.8),0 0px 3px rgba(244,45,0,0.8),0px 0 3px rgba(59,0,226,0.8)}
        45%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),5px 0 1px rgba(251,0,231,0.8),0 5px 1px rgba(0,233,235,0.8),-5px 0 1px rgba(0,242,14,0.8),0 -5px 1px rgba(244,45,0,0.8),5px 0 1px rgba(59,0,226,0.8)}
        50%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),-5px 0 1px rgba(251,0,231,0.8),0 -5px 1px rgba(0,233,235,0.8),5px 0 1px rgba(0,242,14,0.8),0 5px 1px rgba(244,45,0,0.8),-5px 0 1px rgba(59,0,226,0.8)}
        55%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),0px 0 3px rgba(251,0,231,0.8),0 0px 3px rgba(0,233,235,0.8),0px 0 3px rgba(0,242,14,0.8),0 0px 3px rgba(244,45,0,0.8),0px 0 3px rgba(59,0,226,0.8)}
        90%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),-5px 0 1px rgba(251,0,231,0.8),0 5px 1px rgba(0,233,235,0.8),5px 0 1px rgba(0,242,14,0.8),0 -5px 1px rgba(244,45,0,0.8),5px 0 1px rgba(59,0,226,0.8)}
        100%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),5px 0 1px rgba(251,0,231,0.8),0 -5px 1px rgba(0,233,235,0.8),-5px 0 1px rgba(0,242,14,0.8),0 5px 1px rgba(244,45,0,0.8),-5px 0 1px rgba(59,0,226,0.8)}
        }@keyframes rgbText{0%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),0px 0 1px rgba(251,0,231,0.8),0 0px 3px rgba(0,233,235,0.8),0px 0 3px rgba(0,242,14,0.8),0 0px 3px rgba(244,45,0,0.8),0px 0 3px rgba(59,0,226,0.8)}
        25%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),0px 0 1px rgba(251,0,231,0.8),0 0px 3px rgba(0,233,235,0.8),0px 0 3px rgba(0,242,14,0.8),0 0px 3px rgba(244,45,0,0.8),0px 0 3px rgba(59,0,226,0.8)}
        45%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),5px 0 1px rgba(251,0,231,0.8),0 5px 1px rgba(0,233,235,0.8),-5px 0 1px rgba(0,242,14,0.8),0 -5px 1px rgba(244,45,0,0.8),5px 0 1px rgba(59,0,226,0.8)}
        50%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),-5px 0 1px rgba(251,0,231,0.8),0 -5px 1px rgba(0,233,235,0.8),5px 0 1px rgba(0,242,14,0.8),0 5px 1px rgba(244,45,0,0.8),-5px 0 1px rgba(59,0,226,0.8)}
        55%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),0px 0 3px rgba(251,0,231,0.8),0 0px 3px rgba(0,233,235,0.8),0px 0 3px rgba(0,242,14,0.8),0 0px 3px rgba(244,45,0,0.8),0px 0 3px rgba(59,0,226,0.8)}
        90%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),-5px 0 1px rgba(251,0,231,0.8),0 5px 1px rgba(0,233,235,0.8),5px 0 1px rgba(0,242,14,0.8),0 -5px 1px rgba(244,45,0,0.8),5px 0 1px rgba(59,0,226,0.8)}
        100%{text-shadow:-1px 1px 8px rgba(255,255,255,0.6),1px -1px 8px rgba(255,255,235,0.7),5px 0 1px rgba(251,0,231,0.8),0 -5px 1px rgba(0,233,235,0.8),-5px 0 1px rgba(0,242,14,0.8),0 5px 1px rgba(244,45,0,0.8),-5px 0 1px rgba(59,0,226,0.8)}
        }@-webkit-keyframes type{0%,19%{opacity:0}
        20%,100%{opacity:1}
        }@keyframes type{0%,19%{opacity:0}
        20%,100%{opacity:1}
        }
    </style>
</head>
<body>
    <div class="scanlines"></div>

    <div class="intro-wrap">
        <div class="noise"></div>
        <div class="noise noise-moving"></div>
    
        <div class="play" data-splitting>PLAY</div>
        <div class="time">--:--</div>
        <div class="recordSpeed">SLP 0:00:00</div>
    </div>
    <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
    <script>  
        console.clear();
        Splitting();
    </script>
</body>
</html>