黑色科技感背景HTML页面!!附源码!!

<!DOCTYPE html><htmllang="zh-CN"><head>    <metacharset="UTF-8">    <metaname="viewport"content="width=device-width, initial-scale=1.0">    <title>黑色科技感背景</title>    <linkhref="css.css"rel="stylesheet" /></head><body>    <divclass="grid"></div>    <canvasclass="particles"id="particles"></canvas>    <divclass="glow-elements">        <divclass="glow-element element1"></div>        <divclass="glow-element element2"></div>        <divclass="glow-element element3"></div>    </div>    <divclass="container">        <h1>未来科技界面</h1>        <pclass="subtitle">探索未知的数字领域，体验前沿科技带来的无限可能</p>        <divclass="tech-card">            <h2>系统状态</h2>            <p>所有系统运行正常，性能优化达到预期水平。量子计算模块已启动，数据加密等级：A级。</p>            <buttonclass="btn">启动深度扫描</button>        </div>    </div>    <scriptsrc="js.js"></script></body></html>

    * {        margin: 0;        padding: 0;        box-sizing: border-box;    }    body {        background-color: #000;        color: #0ef;        font-family: 'Arial', sans-serif;        overflow: hidden;        height: 100vh;        position: relative;    }    .container {        position: relative;        width: 100%;        height: 100vh;        display: flex;        flex-direction: column;        justify-content: center;        align-items: center;        z-index: 10;    }    h1 {        font-size: 3.5rem;        margin-bottom: 1.5rem;        text-transform: uppercase;        letter-spacing: 3px;        text-shadow: 0 0 10px #0ef, 0 0 20px #0ef, 0 0 40px #0ef;        animation: pulse 2s infinite alternate;    }    .subtitle {        font-size: 1.2rem;        margin-bottom: 2rem;        text-align: center;        max-width: 600px;        line-height: 1.6;        text-shadow: 0 0 5px #0ef;    }    .grid {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        background-image:             linear-gradient(rgba(0, 238, 255, 0.1) 1px, transparent 1px),            linear-gradient(90deg, rgba(0, 238, 255, 0.1) 1px, transparent 1px);        background-size: 50px 50px;        z-index: 1;        animation: gridMove 20s linear infinite;    }    .particles {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        z-index: 2;    }    .glow-elements {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        z-index: 3;    }    .glow-element {        position: absolute;        border-radius: 50%;        background: rgba(0, 238, 255, 0.2);        box-shadow: 0 0 40px 10px rgba(0, 238, 255, 0.5);        animation: glow 5s infinite alternate;    }    .element1 {        width: 300px;        height: 300px;        top: 10%;        left: 5%;        animation-delay: 0s;    }    .element2 {        width: 200px;        height: 200px;        bottom: 10%;        right: 10%;        animation-delay: 2.5s;    }    .element3 {        width: 150px;        height: 150px;        top: 50%;        left: 80%;        animation-delay: 1s;    }    .tech-card {        background: rgba(0, 20, 30, 0.7);        border: 1px solid rgba(0, 238, 255, 0.5);        border-radius: 10px;        padding: 2rem;        margin: 1rem;        max-width: 500px;        box-shadow: 0 0 15px rgba(0, 238, 255, 0.3);        backdrop-filter: blur(5px);        z-index: 10;    }    .tech-card h2 {        color: #0ef;        margin-bottom: 1rem;        font-size: 1.8rem;        text-shadow: 0 0 5px #0ef;    }    .tech-card p {        color: #aaf;        line-height: 1.6;        margin-bottom: 1.5rem;    }    .btn {        background: transparent;        border: 1px solid #0ef;        color: #0ef;        padding: 0.8rem 1.5rem;        border-radius: 5px;        cursor: pointer;        font-size: 1rem;        text-transform: uppercase;        letter-spacing: 1px;        transition: all 0.3s ease;        text-shadow: 0 0 5px #0ef;        box-shadow: 0 0 10px rgba(0, 238, 255, 0.3);    }    .btn:hover {        background: rgba(0, 238, 255, 0.2);        box-shadow: 0 0 15px rgba(0, 238, 255, 0.5);    }    @keyframes pulse {        0% {            text-shadow: 0 0 10px #0ef, 0 0 20px #0ef, 0 0 40px #0ef;        }        100% {            text-shadow: 0 0 5px #0ef, 0 0 10px #0ef, 0 0 20px #0ef, 0 0 30px #0ef;        }    }    @keyframes gridMove {        0% {            background-position: 0 0;        }        100% {            background-position: 50px 50px;        }    }    @keyframes glow {        0% {            opacity: 0.3;            transform: scale(1);        }        100% {            opacity: 0.7;            transform: scale(1.1);        }    }    /* 响应式设计 */    @media (max-width: 768px) {        h1 {            font-size: 2.5rem;        }        .subtitle {            font-size: 1rem;            padding: 0 1rem;        }        .tech-card {            margin: 1rem;            padding: 1.5rem;        }    }

    // 粒子系统    const canvas = document.getElementById('particles');    const ctx = canvas.getContext('2d');    // 设置Canvas尺寸    function resizeCanvas() {        canvas.width = window.innerWidth;        canvas.height = window.innerHeight;    }    resizeCanvas();    window.addEventListener('resize', resizeCanvas);    // 粒子类    class Particle {        constructor() {            this.x = Math.random() * canvas.width;            this.y = Math.random() * canvas.height;            this.size = Math.random() * 2 + 0.5;            this.speedX = Math.random() * 1 - 0.5;            this.speedY = Math.random() * 1 - 0.5;            this.color = `rgba(0, 238, 255, ${Math.random() * 0.5 + 0.1})`;        }        update() {            this.x += this.speedX;            this.y += this.speedY;            // 边界检查            if (this.x > canvas.width) this.x = 0;            if (this.x < 0) this.x = canvas.width;            if (this.y > canvas.height) this.y = 0;            if (this.y < 0) this.y = canvas.height;        }        draw() {            ctx.fillStyle = this.color;            ctx.beginPath();            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);            ctx.fill();        }    }    // 创建粒子    const particles = [];    const particleCount = 150;    for (let i = 0; i < particleCount; i++) {        particles.push(new Particle());    }    // 动画循环    function animate() {        ctx.clearRect(0, 0, canvas.width, canvas.height);        // 绘制连接线        for (let i = 0; i < particles.length; i++) {            for (let j = i; j < particles.length; j++) {                const dx = particles[i].x - particles[j].x;                const dy = particles[i].y - particles[j].y;                const distance = Math.sqrt(dx * dx + dy * dy);                if (distance < 100) {                    ctx.beginPath();                    ctx.strokeStyle = `rgba(0, 238, 255, ${0.2 * (1 - distance/100)})`;                    ctx.lineWidth = 0.5;                    ctx.moveTo(particles[i].x, particles[i].y);                    ctx.lineTo(particles[j].x, particles[j].y);                    ctx.stroke();                }            }        }        // 更新和绘制粒子        particles.forEach(particle => {            particle.update();            particle.draw();        });        requestAnimationFrame(animate);    }    animate();    // 添加交互效果    document.querySelector('.btn').addEventListener('click', function() {        this.textContent = '扫描中...';        this.style.boxShadow = '0 0 20px rgba(0, 238, 255, 0.8)';        setTimeout(() => {            this.textContent = '扫描完成';            setTimeout(() => {                this.textContent = '启动深度扫描';                this.style.boxShadow = '0 0 10px rgba(0, 238, 255, 0.3)';            }, 2000);        }, 1500);    });