地址栏URL动画教程

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

添加一个URL动画的Js代码：你仅需在你网页的“</body> ”标签前添加一段以下代码即可

旋转月亮：

<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>

动画演示站：urlanim.scdn.io