查看“︁用户:Vvfather”︁的源代码

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

        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        body {

            background: #000;

            min-height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

            overflow: hidden;

            font-family: 'Arial', sans-serif;

        }

        

        .container {

            position: relative;

            width: 100%;

            height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        

        /* 粒子画布 */

        #particles {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: 1;

        }

        

        /* 文字样式 */

        .text {

            position: relative;

            z-index: 2;

            font-size: 8vw;

            font-weight: 900;

            text-transform: uppercase;

            color: transparent;

            -webkit-text-stroke: 2px #0ff;

            text-shadow: 0 0 10px #0ff, 

                         0 0 20px #0ff, 

                         0 0 40px #0ff, 

                         0 0 80px #0ff;

            animation: pulsate 2s infinite alternate;

            transform-style: preserve-3d;

            transition: transform 0.5s;

        }

        

        .text::before {

            content: attr(data-text);

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            color: #0ff;

            z-index: -1;

            filter: blur(15px);

        }

        

        .text::after {

            content: attr(data-text);

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            color: #0ff;

            z-index: -2;

            filter: blur(30px);

        }

        

        /* 动画效果 */

        @keyframes pulsate {

            0% {

                text-shadow: 0 0 10px #0ff, 

                             0 0 20px #0ff, 

                             0 0 40px #0ff, 

                             0 0 80px #0ff;

                opacity: 0.8;

            }

            100% {

                text-shadow: 0 0 5px #0ff, 

                             0 0 10px #0ff, 

                             0 0 20px #0ff, 

                             0 0 40px #0ff,

                             0 0 80px #0ff,

                             0 0 160px #0ff;

                opacity: 1;

            }

        }

        

        @keyframes rotate {

            0% {

                transform: perspective(1000px) rotateY(0deg);

            }

            100% {

                transform: perspective(1000px) rotateY(360deg);

            }

        }

        

        /* 悬停效果 */

        .text:hover {

            transform: perspective(1000px) rotateY(20deg) scale(1.1);

        }

        

        /* 响应式设计 */

        @media (max-width: 768px) {

            .text {

                font-size: 12vw;

            }

        }

    </style>

</head>

<body>

    <nowiki><div class="container"></nowiki>

        <canvas id="particles"></canvas>

        <nowiki><div class="text" data-text="神秘的人">神秘的人</div></nowiki>

    <nowiki></div></nowiki>

    <script>

        // 粒子动画

        document.addEventListener('DOMContentLoaded', function() {

            const canvas = document.getElementById('particles');

            const ctx = canvas.getContext('2d');

            let particlesArray = [];

            

            // 设置画布尺寸

            function setCanvasSize() {

                canvas.width = window.innerWidth;

                canvas.height = window.innerHeight;

            }

            setCanvasSize();

            window.addEventListener('resize', setCanvasSize);

            

            // 粒子类

            class Particle {

                constructor() {

                    this.x = Math.random() * canvas.width;

                    this.y = Math.random() * canvas.height;

                    this.size = Math.random() * 2 + 1;

                    this.speedX = Math.random() * 3 - 1.5;

                    this.speedY = Math.random() * 3 - 1.5;

                    this.color = `hsl(${Math.random() * 60 + 180}, 100%, 70%)`;

                }

                

                update() {

                    this.x += this.speedX;

                    this.y += this.speedY;

                    

                    if (this.x > canvas.width || this.x < 0) {

                        this.speedX = -this.speedX;

                    }

                    if (this.y > canvas.height || this.y < 0) {

                        this.speedY = -this.speedY;

                    }

                }

                

                draw() {

                    ctx.fillStyle = this.color;

                    ctx.beginPath();

                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);

                    ctx.fill();

                }

            }

            

            // 初始化粒子

            function init() {

                particlesArray = [];

                const numberOfParticles = (canvas.width * canvas.height) / 9000;

                

                for (let i = 0; i < numberOfParticles; i++) {

                    particlesArray.push(new Particle());

                }

            }

            

            // 连接粒子

            function connect() {

                const maxDistance = 100;

                for (let a = 0; a < particlesArray.length; a++) {

                    for (let b = a; b < particlesArray.length; b++) {

                        const dx = particlesArray[a].x - particlesArray[b].x;

                        const dy = particlesArray[a].y - particlesArray[b].y;

                        const distance = Math.sqrt(dx * dx + dy * dy);

                        

                        if (distance < maxDistance) {

                            ctx.strokeStyle = `hsla(180, 100%, 70%, ${1 - distance/maxDistance})`;

                            ctx.lineWidth = 1;

                            ctx.beginPath();

                            ctx.moveTo(particlesArray[a].x, particlesArray[a].y);

                            ctx.lineTo(particlesArray[b].x, particlesArray[b].y);

                            ctx.stroke();

                        }

                    }

                }

            }

            

            // 动画循环

            function animate() {

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                

                for (let i = 0; i < particlesArray.length; i++) {

                    particlesArray[i].update();

                    particlesArray[i].draw();

                }

                

                connect();

                requestAnimationFrame(animate);

            }

            

            init();

            animate();

            

            // 添加鼠标交互

            let mouseX = 0;

            let mouseY = 0;

            let mouseRadius = 50000;

            

            canvas.addEventListener('mousemove', function(e) {

                mouseX = e.x;

                mouseY = e.y;

                

                // 鼠标附近的粒子被推开

                for (let i = 0; i < particlesArray.length; i++) {

                    const dx = particlesArray[i].x - mouseX;

                    const dy = particlesArray[i].y - mouseY;

                    const distance = Math.sqrt(dx * dx + dy * dy);

                    

                    if (distance < mouseRadius) {

                        const force = (mouseRadius - distance) / mouseRadius;

                        const angle = Math.atan2(dy, dx);

                        const moveX = Math.cos(angle) * force * 10;

                        const moveY = Math.sin(angle) * force * 10;

                        

                        particlesArray[i].x += moveX;

                        particlesArray[i].y += moveY;

                    }

                }

            });

        });

    </script>

</body>

</html>