Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Yêu Yến Mãi Mãi</title> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| background: linear-gradient(to bottom right, #ffffff, #ffe6f0); | |
| height: 100vh; | |
| width: 100vw; | |
| font-family: 'Arial Rounded MT Bold', sans-serif; | |
| } | |
| .container { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| h1 { | |
| font-size: 5rem; | |
| color: #ff2e63; | |
| text-shadow: 0 0 25px #ff7fa1, 0 0 40px #ff2e63; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .letter { | |
| display: inline-block; | |
| animation: floaty 3s ease-in-out infinite; | |
| } | |
| .letter:nth-child(1) { animation-delay: 0s; } | |
| .letter:nth-child(2) { animation-delay: 0.1s; } | |
| .letter:nth-child(3) { animation-delay: 0.2s; } | |
| .letter:nth-child(5) { animation-delay: 0.3s; } | |
| .letter:nth-child(6) { animation-delay: 0.4s; } | |
| .letter:nth-child(7) { animation-delay: 0.5s; } | |
| .letter:nth-child(9) { animation-delay: 0.6s; } | |
| .letter:nth-child(10) { animation-delay: 0.7s; } | |
| .letter:nth-child(11) { animation-delay: 0.8s; } | |
| .letter:nth-child(13) { animation-delay: 0.9s; } | |
| .letter:nth-child(14) { animation-delay: 1s; } | |
| .letter:nth-child(15) { animation-delay: 1.1s; } | |
| @keyframes floaty { | |
| 0% { transform: translateY(0) rotate(0deg); } | |
| 25% { transform: translateY(-8px) rotate(1deg); } | |
| 50% { transform: translateY(0) rotate(0deg); } | |
| 75% { transform: translateY(8px) rotate(-1deg); } | |
| 100% { transform: translateY(0) rotate(0deg); } | |
| } | |
| .heart { | |
| position: absolute; | |
| font-size: 24px; | |
| animation: pop 1s ease-out forwards; | |
| color: #ff4d6d; | |
| pointer-events: none; | |
| } | |
| @keyframes pop { | |
| 0% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(2); opacity: 0; top: -40px; } | |
| } | |
| .spider { | |
| position: absolute; | |
| font-size: 34px; | |
| pointer-events: none; | |
| transition: transform 0.2s linear; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1> | |
| <span class="letter">Y</span> | |
| <span class="letter">Ê</span> | |
| <span class="letter">U</span> | |
| <span class="letter">Y</span> | |
| <span class="letter">Ế</span> | |
| <span class="letter">N</span> | |
| <span class="letter">M</span> | |
| <span class="letter">Ã</span> | |
| <span class="letter">I</span> | |
| <span class="letter">M</span> | |
| <span class="letter">Ã</span> | |
| <span class="letter">I</span> | |
| </h1> | |
| </div> | |
| <div id="spider" class="spider">🕷️❤️</div> | |
| <audio id="bg-music" src="music.mp3" autoplay loop hidden></audio> | |
| <script> | |
| const spider = document.getElementById('spider'); | |
| const music = document.getElementById('bg-music'); | |
| let mouseX = window.innerWidth / 2; | |
| let mouseY = window.innerHeight / 2; | |
| let spiderX = mouseX, spiderY = mouseY; | |
| function createHeart(x, y) { | |
| const heart = document.createElement('div'); | |
| heart.className = 'heart'; | |
| heart.innerText = '❤️'; | |
| heart.style.left = `${x}px`; | |
| heart.style.top = `${y}px`; | |
| document.body.appendChild(heart); | |
| setTimeout(() => heart.remove(), 1000); | |
| } | |
| document.addEventListener('mousemove', (e) => { | |
| mouseX = e.clientX; | |
| mouseY = e.clientY; | |
| createHeart(e.clientX, e.clientY); | |
| }); | |
| document.addEventListener('click', (e) => { | |
| createHeart(e.clientX, e.clientY); | |
| spiderX = e.clientX; | |
| spiderY = e.clientY; | |
| }); | |
| document.addEventListener('touchmove', (e) => { | |
| const touch = e.touches[0]; | |
| mouseX = touch.clientX; | |
| mouseY = touch.clientY; | |
| createHeart(mouseX, mouseY); | |
| }); | |
| document.addEventListener('touchstart', (e) => { | |
| const touch = e.touches[0]; | |
| createHeart(touch.clientX, touch.clientY); | |
| spiderX = touch.clientX; | |
| spiderY = touch.clientY; | |
| }); | |
| // Bypass autoplay block | |
| document.addEventListener('click', () => { | |
| music.play(); | |
| }, { once: true }); | |
| function moveSpider() { | |
| const dx = mouseX - spiderX; | |
| const dy = mouseY - spiderY; | |
| spiderX += dx * 0.1; | |
| spiderY += dy * 0.1; | |
| spider.style.transform = `translate(${spiderX}px, ${spiderY}px)`; | |
| requestAnimationFrame(moveSpider); | |
| } | |
| moveSpider(); | |
| </script> | |
| </body> | |
| </html> |