首页生成一个生日祝福动态前端代码

生成一个生日祝福动态前端代码

时间: 2024-10-06 10:06:47 浏览: 51

当然可以，下面是一个简单的HTML、CSS和JavaScript结合的动态生日祝福页面示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .birthday-greeting { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; color: black; font-size: 3rem; transition: color 1s; } .happy-birthday { animation: birthday-anime 3s infinite alternate; } @keyframes birthday-anime { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="birthday-greeting happy-birthday">祝你生日快乐!</div> <script> // 当页面加载时，设置一个点击事件 document.addEventListener('DOMContentLoaded', function() { const greeting = document.querySelector('.birthday-greeting'); greeting.addEventListener('click', function() { // 点击时改变文字颜色和动画速度 this.style.color = 'red'; this.style.animationDuration = '2s'; }); }); </script> </body> </html> ``` 这个例子中，当用户点击页面时，"祝你生日快乐!"的文字会旋转并变为红色，给人一种动态的感觉。这是一个基础的交互式生日祝福，你可以根据需要添加更多样式和功能。

阅读全文