地址栏URL动画教程

URL动画虽然无实质作用，但是可以给每个访客留下深刻的印象也能给他们展现自己雄厚的技术力量，那么这里就教你实现该动画让你也成为大佬。

旋转月亮：

<script>
    // 定义动画帧
    var frames = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘'];

    function loop() {
        // 根据当前时间戳计算并设置地址栏的哈希值
        location.hash = frames[Math.floor((Date.now()/100) % frames.length)];

        // 50毫秒后再次调用自身，形成循环
        setTimeout(loop, 50);
    }

    // 启动动画
    loop();
</script>

时钟：

<script>
    var frames = ['🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛'];

    function loop() {
        location.hash = frames[Math.floor((Date.now()/100) % frames.length)];
        setTimeout(loop, 50);
    }

    loop();
</script>

变色宝宝：

<script>
    // 定义肤色修饰符
    var skinTones = ['🏻', '🏼', '🏽', '🏾', '🏿'];

    function loop() {
        var s = '';
        // 生成10个宝宝
        for (var i = 0; i < 10; i++) {
            // 使用sin函数让颜色平滑地变化
            var m = Math.floor(skinTones.length * ((Math.sin((Date.now()/100) + i)+1)/2));
            s += '👶' + skinTones[m];
        }

        location.hash = s;
        setTimeout(loop, 50);
    }

    loop();
</script>

多月亮加载条：

<script>
    var frames = ['🌑', '🌘', '🌗', '🌖', '🌕', '🌔', '🌓', '🌒'];
    // d数组用于存储每个月亮的状态，m用于控制是填充还是清空
    var d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var m = 0;

    function loop() {
        var s = '', x = 0;

        if (!m) { // 填充阶段
            while (x < d.length && d[x] == 4) { x++; }
            if (x >= d.length) m = 1;
            else { d[x]++; }
        }
        else { // 清空阶段
            while (x < d.length && d[x] == 0) { x++; }
            if (x >= d.length) m = 0;
            else {
                d[x]++;
                if (d[x] == 8) d[x] = 0;
            }
        }

        d.forEach(function (n) { s += frames[n]; });
        location.hash = s;
        setTimeout(loop, 50);
    }

    loop();
</script>

波浪块：

<script>
    function loop() {
        var i, n, s = '';

        for (i = 0; i < 10; i++) {
            // 使用sin函数和不同的字符编码来创建波浪效果
            n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4;
            s += String.fromCharCode(0x2581 + n);
        }

        window.location.hash = s;
        setTimeout(loop, 50);
    }

    loop();
</script>

进度条：

<script>
    function loop() {
        var s = '', p;

        // 使用sin函数生成一个0到100之间摆动的数值
        p = Math.floor(((Math.sin(Date.now()/300)+1)/2) * 100);

        // 使用全宽方块字符'█'填充大部分进度
        while (p >= 8) {
            s += '█';
            p -= 8;
        }
        // 使用不同宽度的方块字符显示余数，实现平滑效果
        s += ['⠀','▏','▎','▍','▌','▋','▊','▉'][p];

        location.hash = s;
        setTimeout(loop, 50);
    }

    loop();
</script>

前进的火车：

<script>
    const train = '🚂🚃🚃💨';
    const trackChar = '~';
    const viewWidth = 15; // 动画窗口的宽度

    // 1. 创建一个虚拟轨道，比窗口稍长，末尾是火车
    const virtualTrack = trackChar.repeat(viewWidth) + train;
    // 2. 将虚拟轨道复制一份拼接，用于无缝循环
    const doubleTrack = virtualTrack + virtualTrack;
    
    let position = 0;

    function loop() {
        // 3. 计算当前窗口在"双倍轨道"上应该开始的位置
        const start = position % virtualTrack.length;
        // 4. 从"双倍轨道"上截取窗口宽度的内容
        location.hash = doubleTrack.substring(start, start + viewWidth);
        
        position++;
        setTimeout(loop, 150); // 火车速度
    }
    loop();
</script>

视频时间进度：

<script>
    function loop() {
        const duration = 300; // 模拟视频总时长(秒)
        const currentTime = (Date.now() / 50) % duration; // 模拟当前播放时间
        const l = 15; // 进度条长度
        let s = '';
        
        const p = Math.floor(currentTime / duration * (l-1));

        for (let i = 0; i < l; i ++) {
            if (i == p) s +='◯';
            else if (i < p) s += '─';
            else s += '┄';
        }
        
        // 格式化时间，例如 01:30
        function formatTime(seconds) {
            var minutes = Math.floor(seconds/60),
                seconds = Math.floor(seconds - (minutes*60));
            return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
        }

        location.hash = '╭'+s+'╮'+formatTime(currentTime)+'╱'+formatTime(duration);
        setTimeout(loop, 50);
    }

    loop();
</script>

视频时间进度（月亮）：

<script>
    const frames = ['🌑', '🌘', '🌗', '🌖', '🌕'];

    function loop() {
        const duration = 300; // 模拟视频总时长(秒)
        const currentTime = (Date.now() / 50) % duration; // 模拟当前播放时间
        const l = 10; // 进度条长度
        let s = '', c = 0;
        
        let p = Math.floor(currentTime / duration * ((l*5)-1));
        
        while (p >= 5) {
            s += frames[4];
            c++;
            p -= 5;
        }
        s += frames[p];
        c++;

        while (c < l) {
            s += frames[0];
            c++;
        }

        // 格式化时间，例如 01:30
        function formatTime(seconds) {
            var minutes = Math.floor(seconds/60),
                seconds = Math.floor(seconds - (minutes*60));
            return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2);
        }

        location.hash = s+formatTime(currentTime)+'╱'+formatTime(duration);
        setTimeout(loop, 50);
    }

    loop();
</script>

模拟打字效果：

<script>
    const fullText = 'url-animation.fun';
    let index = 0;
    let isDeleting = false;
    let timeout = 200;

    function loop() {
        const cursor = '█';
        let textToShow = '';
        
        if (isDeleting) { // 如果是删除状态
            textToShow = fullText.substring(0, index - 1);
            index--;
            timeout = 100;
        } else { // 如果是打字状态
            textToShow = fullText.substring(0, index + 1);
            index++;
            timeout = 200;
        }

        location.hash = textToShow + cursor;

        // 状态切换逻辑
        if (!isDeleting && index === fullText.length) {
            timeout = 2000; // 打完字后暂停
            isDeleting = true;
        } else if (isDeleting && index === 0) {
            timeout = 500; // 删除完后暂停
            isDeleting = false;
        }
        
        setTimeout(loop, timeout);
    }
    loop();
</script>