HTML/CSS/JS 生日快乐祝福代码

当然可以，如果你想在HTML、CSS和JavaScript中创建一个动态的生日祝福页面，下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Happy Birthday!</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; font-family: Arial, sans-serif; } .birthday-message { text-align: center; color: #ff69b4; font-size: 3em; margin-bottom: 2rem; } @keyframes birthday-wish { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } </style> </head> <body> <div class="birthday-message" id="greeting"> <h1>生日快乐，<span id="name">[用户姓名]</span>!</h1> <p id="animation">让这个动画传达我的祝福...</p> <div id="heart" class="heart animated" style="--heart-opacity: 0;"></div> </div> <script> // 替换 [用户姓名] 为你实际需要的姓名 const userName = "张三"; // 这里假设用户姓名是张三 document.getElementById('name').textContent = userName; // 动画效果 const heartElement = document.getElementById('heart'); heartElement.addEventListener('animationend', function() { heartElement.style.setProperty('--heart-opacity', '1'); setTimeout(() => { heartElement.style.setProperty('--heart-opacity', '0'); }, 1500); }); // 绑定点击事件模拟鼠标点击 heartElement.addEventListener('click', function() { heartElement.classList.toggle('toggled-heart'); }); // 动画启动 const greeting = document.getElementById('greeting'); greeting.style.animationDuration = '2s'; greeting.style.animationName = 'birthday-wish'; </script> </body> </html> ``` 在这个例子中，当页面加载时会显示一条个性化的生日祝福，其中包含用户的姓名（这里替换成具体的用户姓名）。同时，还有一个心形图标随着鼠标点击而淡入淡出，给人一种动态的感觉。

阅读全文