侧边栏壁纸
  • 累计撰写 34 篇文章
  • 累计创建 10 个标签
  • 累计收到 14 条评论

目 录CONTENT

文章目录

halo代码注入(动画效果:刀子雨)

小杨学JAVA
2024-09-01 / 0 评论 / 3 点赞 / 136 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
"请尊重网络安全,避免恶意攻击,让我们共同维护良好的网络环境。"

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>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水龙卷和叶子动画</title>
  <!-- 引入字体文件的 CSS 链接 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4691632_xtzkb3s398.css">
<!-- class="m-icon jiewen joe-icon-zuzhijiagou" 的图标替换为Marvel的图标 -->
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }

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

        .leaf {
            position: absolute;
            color: green; /* 将叶子设为绿色 */
            font-size: 20px; /* 叶子的大小 */
            animation: tornado linear infinite;
        }

        .water-vortex {
            position: absolute;
            color: lightblue; /* 水龙卷颜色 */
            font-size: 30px; /* 水龙卷的大小 */
            animation: vortex linear infinite;
        }

        @keyframes tornado {
            0% {
                transform: translate(0, -100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translate(100vw, 100vh) rotate(720deg);
                opacity: 0;
            }
        }

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

<!-- 叶子和水龙卷容器 -->
<div id="effect-container"></div>

<script>
    const MAX_LEAVES = 100; // 最大叶子数量
    const MAX_WATER_VORTICES = 100; // 最大水龙卷数量
    let leaves = [];
    let waterVortices = [];

    // 创建叶子
    function createLeaf() {
        if (leaves.length >= MAX_LEAVES) {
            return;
        }

        const leaf = document.createElement('div');
        leaf.classList.add('leaf');
        leaf.textContent = '😍';  // 使用树叶的符号

        // 随机叶子样式
        const size = Math.random() * 10 + 20 + 'px';  // 叶子的大小
        const startLeft = Math.random() * 100 + 'vw'; // 叶子起始位置
        const startTop = Math.random() * 100 + 'vh'; // 叶子起始位置
        const duration = Math.random() * 2 + 1 + 's'; // 叶子旋转和移动持续时间

        leaf.style.left = startLeft;
        leaf.style.top = startTop;
        leaf.style.fontSize = size;
        leaf.style.animationDuration = duration;

        document.getElementById('effect-container').appendChild(leaf);
        leaves.push(leaf);

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

    // 创建水龙卷
    function createWaterVortex() {
        if (waterVortices.length >= MAX_WATER_VORTICES) {
            return;
        }

        const waterVortex = document.createElement('div');
        waterVortex.classList.add('water-vortex');
        waterVortex.textContent = '😀';  // 使用水波纹的符号
     

        // 随机水龙卷样式
        const size = Math.random() * 15 + 10 + 'px';  // 水龙卷的大小
        const startLeft = Math.random() * 100 + 'vw'; // 水龙卷起始位置
        const duration = Math.random() * 5 + 1 + 's'; // 水龙卷旋转和移动持续时间

        waterVortex.style.left = startLeft;
        waterVortex.style.fontSize = size;
        waterVortex.style.animationDuration = duration;

        document.getElementById('effect-container').appendChild(waterVortex);
        waterVortices.push(waterVortex);

        // 动画结束后移除水龙卷并更新数组
        setTimeout(() => {
            waterVortex.remove();
            waterVortices = waterVortices.filter(item => item !== waterVortex);
        }, parseFloat(duration) * 1000);
    }

    // 增加叶子生成频率
    setInterval(createLeaf, 150); // 每150ms生成一个叶子
    // 增加水龙卷生成频率
    setInterval(createWaterVortex, 100); // 每100ms生成一个水龙卷
  
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var icons = document.querySelectorAll('.m-icon.jiewen');
        var marvelIcons = [
            'hero-lvdengxia', 'hero-leishen', 'hero-lvjuren', 'hero-leisheyan', 
            'hero-meiguoduichang', 'hero-shandianxia', 'hero-sishi', 
            'hero-shenqixiansheng', 'hero-huoxinglieren', 'hero-qianshuixia', 
            'hero-yuanzixia', 'hero-jinganglang', 'hero-bianfuxia', 'hero-chaoren', 
            'hero-zhizhuxia', 'hero-hongxuanfeng', 'hero-heifuwang', 
            'hero-gangtiexia', 'hero-yingguoduichang', 'hero-yiren'
        ];
        
        icons.forEach(function(iconElement, index) {
            // 移除旧的类
            iconElement.className = '';
            
            // 获取当前索引对应的图标名称
            var newIcon = marvelIcons[index % marvelIcons.length];
            
            // 添加新的类
            iconElement.classList.add('m-icon', 'Marvel', newIcon);
        });
    });
</script>

</body>
</html>
  

3
  1. 支付宝打赏

    qrcode alipay
  2. 微信打赏

    qrcode weixin

评论区