用户:Vvfather：修订间差异

来自恶俗维基
跳转到导航 跳转到搜索
←上一编辑下一编辑→
Vvfather​（留言 | 贡献）
38次编辑
清空全部内容
标签：清空 visualeditor
Vvfather​（留言 | 贡献）
38次编辑
无编辑摘要
标签：wikieditor
第1行： 第1行：
<!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>
    <div class="container">
        <canvas id="particles"></canvas>
        <div class="text" data-text="神秘的人">神秘的人</div>
    </div>


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

2025年9月12日 (五) 15:51的版本

<!DOCTYPE html> 神秘的人 - 炫酷展示

神秘的人

检索自“https://esu.team/index.php?title=用户:Vvfather&oldid=8615”