分享JS四种好玩的黑客背景效果代码

下面我将详细讲解“分享JS四种好玩的黑客背景效果代码”的完整攻略。

1. 简介

黑客背景效果是一种常见的网页背景效果，其通过在页面背景上显示类似黑客攻击的效果，给人一种神秘而高科技的感觉。本文将分享四种好玩的JS黑客背景效果代码，具体包括：

随机字符滚动效果
矩阵雨效果
烟花爆炸效果
扫描线效果

以下将对每种效果进行具体讲解。

2. 随机字符滚动效果

随机字符滚动效果是一种很有趣的黑客背景效果，它会在页面上随机滚动显示字符。下面是代码：

<body id="body"></body>

<script>
const characters = "!<>-_\\/[]{}—=+*^?#________";
const numberOfCharacters = 200;
const duration = 50;

for (let i = 0; i < numberOfCharacters; i++) {
    const span = document.createElement("span");
    span.innerText = characters.charAt(Math.floor(Math.random() * characters.length));
    span.style.animationDelay = `${i * duration}ms`;
    document.getElementById("body").appendChild(span);
}
</script>

这段代码使用了CSS的动画特性，使用了 animation-delay 来对每个字符的滚动速度进行控制。

3. 矩阵雨效果

矩阵雨效果是一种非常经典的黑客背景效果，它会在页面上滚动显示矩阵代码的效果。下面是代码：

<body>

<canvas id="c"></canvas>

<script type="module">
import * as THREE from "https://esm.sh/three@0.125.2/build/three.module.js";

const c = document.getElementById("c");
const ctx = c.getContext("2d");

const numberOfColumns = 100;
const fontSize = 12;
const fontName = "Consolas";
const columnSpeed = 30;
const columnDelay = 150;
const letterSpacing = 10;

const characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const charactersLength = characters.length;

const text = [];
for (let i = 0; i < 60; i++) {
    text[i] = {
        char: characters.charAt(Math.floor(Math.random() * charactersLength)),
        y: -i * fontSize
    };
}

class Column {
    constructor(x) {
        this.x = x;
        this.maxHeight = c.height;
        this.speed = columnSpeed;
        this.delay = x * columnDelay;
        this.transitionCounter = 0;
        this.letters = [];
        this.numberOfLetters = Math.floor(Math.random() * 20);
        for (let i = 0; i < this.numberOfLetters; i++) {
            this.letters.push(characters.charAt(Math.floor(Math.random() * charactersLength)));
        }
    }

    update(dt) {
        this.transitionCounter += dt;
        if (this.transitionCounter > this.delay && this.letters.length <= text.length) {
            this.letters.unshift(text[this.letters.length]);
            this.transitionCounter = 0;
        }

        if (this.letters.length > text.length + 1) {
            this.letters.pop();
        }

        this.maxHeight = text.length * fontSize + columnSpeed;
    }

    draw() {
        ctx.font = `${fontSize}px ${fontName}`;
        ctx.fillStyle = "#33FF00";
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        for (let i = 0; i < this.letters.length; i++) {
            const letter = this.letters[i];
            const y = letter.y + columnSpeed;
            const x = this.x;
            const alpha = (text.length - letter.y) / text.length;
            const color = `rgba(51, 255, 0, ${alpha})`;
            ctx.fillStyle = color;
            ctx.fillText(letter.char, x, y);
        }
    }
}

const columns = [];
for (let i = 0; i < numberOfColumns; i++) {
    columns.push(new Column(i * letterSpacing));
}

let lastTime = Date.now();

function frame() {
    const currentTime = Date.now();
    const dt = (currentTime - lastTime) / 1000;
    ctx.clearRect(0, 0, c.width, c.height);
    for (let i = 0; i < columns.length; i++) {
        const column = columns[i];
        column.update(dt);
        column.draw();
    }

    lastTime = currentTime;
    requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
</script>
</body>

矩阵雨效果使用了 canvas 元素和 three.js 库来处理动画效果。该代码使用了字母淡入淡出和运动效果，让矩阵代码的效果展示得更加出色。

4. 烟花爆炸效果

烟花爆炸效果是一种非常神奇的黑客背景效果，它会在页面上显示烟花爆炸的效果。下面是代码：

<body>

<div id="container"></div>

<script>
const container = document.querySelector("#container");

class Firework {
    constructor() {
        this.x = Math.random() * container.clientWidth;
        this.y = container.clientHeight;
        this.radius = 3;
        this.launchTime = Date.now();
        this.speed = {
            x: Math.random() * 6 - 3,
            y: -Math.random() * 15 - 10
        };
        this.time = 0;
        this.maxTime = Math.random() * 200 + 300;
        this.color = {
            r: 200 + Math.round(Math.random() * 55),
            g: 200 + Math.round(Math.random() * 55),
            b: 200 + Math.round(Math.random() * 55),
        }
    }

    update() {
        const dt = (Date.now() - this.launchTime) / 1000;
        this.x += this.speed.x;
        this.y += this.speed.y + dt * 50;
        this.time += dt;
        if (this.time >= this.maxTime) {
            createFireworks(this.x, this.y);
        }
    }

    draw() {
        const style = `rgba(${this.color.r}, ${this.color.g}, ${this.color.b}, ${1 - this.time / this.maxTime})`;
        container.insertAdjacentHTML("beforeend", `<div class="particle" style="background-color:${style};top:${this.y}px;left:${this.x}px;"></div>`);
    }

    get isDone() {
        return this.y > container.clientHeight || this.time >= this.maxTime;
    }
}

const fireworks = [];

function updateFireworks() {
    for (let i = fireworks.length - 1; i >= 0; i--) {
        const firework = fireworks[i];
        firework.update();
        if (firework.isDone) {
            fireworks.splice(i, 1);
        }
    }
}

function drawFireworks() {
    for (let i = fireworks.length - 1; i >= 0; i--) {
        const firework = fireworks[i];
        firework.draw();
    }
}

function createFireworks(x, y) {
    for (let i = 0; i < 50; i++) {
        const firework = new Firework();
        fireworks.push(firework);
    }
}

function frame() {
    updateFireworks();
    drawFireworks();
    requestAnimationFrame(frame);
}

requestAnimationFrame(frame);
</script>

<style>
#container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
</style>
</body>

烟花爆炸效果使用了 div 元素和 setTimeout 来处理动画效果。该代码使用了类似于粒子爆炸的效果，让页面显示得更加抢眼。

5. 扫描线效果

扫描线效果是一种非常独特的黑客背景效果，它会在页面上扫描显示线条的效果。下面是代码：

<body>

<div id="container">
    <div class="line"></div>
    <div class="line"></div>
</div>

<script>
const container = document.querySelector("#container");
const lines = document.querySelectorAll(".line");

let animationFrameId;
let lineIndex = 0;
let lineHeight = "100%";

function update() {
    lines[lineIndex].style.height = lineHeight;
    if (lineHeight === "100%") {
        lineIndex -= 1;
        lineHeight = "0%";
    } else if (lineHeight === "0%") {
        lineIndex += 1;
        lineHeight = "100%";
    }
    if (lineIndex < 0) {
        lineIndex = lines.length - 1;
    }
    if (lineIndex >= lines.length) {
        lineIndex = 0;
    }
    animationFrameId = requestAnimationFrame(update);
}

update();
</script>

<style>
#container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
}

.line {
    position: absolute;
    width: 100%;
    height: 0%;
    top: 0;
    left: 0;
    background-color: #0F0;
    opacity: 0.1;
    transition: .3s ease-out;
    transform-origin: 50% 0%;
}

.line:nth-child(even) {
    background-color: #0F0;
}

.line:nth-child(odd) {
    background-color: #00FF00;
}

.line:nth-child(1) {
    animation: none !important;
    height: 100% !important;
    width: 1px;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
}
</style>
</body>

扫描线效果使用了 div 元素的 transition 和 transform 属性来处理动画效果。该代码使用了类似于电视机扫描效果的线条扫描效果，让页面显示得更加科幻。

以上就是关于“分享JS四种好玩的黑客背景效果代码”的详细攻略。希望对你有帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：分享JS四种好玩的黑客背景效果代码 - Python技术站