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