halo代码注入（动画效果：刀子雨）

Live小杨

已于 2024-09-11 11:49:02 修改

阅读量218

点赞数 2

文章标签：前端

于 2024-09-10 04:51:20 首次发布

本文链接：https://blog.csdn.net/qq_68334563/article/details/142073652

版权

halo提供了代码注入功能，我们可以在里面添加很多动画效果，可以添加我们想要的功能。注：注意在创建的时候添加不影响滚动

血雨血色叶子动画效果

在这里插入图片描述

在这里插入图片描述
可以根据我们自己想要的效果进行增加修改，接下来是我在全局添加的一个下刀子的一个动画效果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下刀子动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            /* 保持滚动条可用 */
            background-color: #000;
        }

        /* 包含所有刀子的容器，放在页面最上层但不影响滚动 */
        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none; /* 防止点击事件被捕获 */
            z-index: 9999; /* 确保在最上层 */
            overflow: visible; /* 确保刀子可以超出容器边界飘动 */
        }

        .knife {
            position: absolute;
            top: -10px;
            color: red; /* 刀子颜色 */
            font-size: 30px; /* 刀子的大小 */
            animation: fall linear infinite;
        }

        @keyframes fall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>

<!-- 刀子容器 -->
<div id="snow-container"></div>

<script>
    const MAX_KNIVES = 100; // 同时显示的刀子数量增至100
    let knives = [];

    function createKnife() {
        if (knives.length >= MAX_KNIVES) {
            return;
        }

        const knife = document.createElement('div');
        knife.classList.add('knife');
        knife.textContent = '🔪';  // 使用刀子的符号

        // 随机刀子样式
        const size = Math.random() * 20 + 20 + 'px';  // 刀子的大小
        const startLeft = Math.random() * 100 + 'vw'; // 刀子起始位置
        const duration = Math.random() * 3 + 3 + 's'; // 刀子下落持续时间
        const delay = Math.random() * 2 + 's';        // 刀子开始下落的延迟时间

        knife.style.left = startLeft;
        knife.style.fontSize = size;
        knife.style.animationDuration = duration;
        knife.style.animationDelay = delay;

        document.getElementById('snow-container').appendChild(knife);
        knives.push(knife);

        // 动画结束后移除刀子并更新数组
        setTimeout(() => {
            knife.remove();
            knives = knives.filter(item => item !== knife);
        }, (parseFloat(duration) + parseFloat(delay)) * 1000);
    }

    // 增加刀子生成频率
    setInterval(createKnife, 150); // 调整生成频率，150ms生成一个刀子
</script>

</body>
</html>

在这里插入图片描述