<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微信红包整蛊</title> <style> body { background-color: #f5f5f5; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .red-packet { width: 3
</div> `; } </script> </body> </html> 这个微信红包整蛊页面代码基本完整，但还可以做一些优化和增强效果： 1. 增加红包打开动画效果： ```css @keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .open-btn:active { animation: shake 0.3s ease-in-out; } .amount { transition: all 0.5s ease; } ``` 2. 增强结果展示效果： ```javascript // 修改openBtn点击事件 openBtn.addEventListener('click', function() { openBtn.textContent = "正在开启..."; openBtn.disabled = true; // 红包抖动效果 this.style.animation = "shake 0.3s ease-in-out 3"; setTimeout(() => { amount.style.display = "block"; amount.style.transform = "scale(1.2)"; amount.style.opacity = "0"; setTimeout(() => { amount.style.display = "none"; result.style.display = "block"; result.style.animation = "fadeIn 0.5s ease"; const randomResult = prankResults[Math.floor(Math.random() * prankResults.length)]; result.textContent = randomResult; openBtn.textContent = "看看大家的手气"; setTimeout(showFakeList, 3000); }, 500); }, 1500); }); ``` 3. 添加更多整蛊效果： ```javascript // 在showFakeList函数中添加 function showFakeList() { result.innerHTML = ` <div style="text-align: left; margin-bottom: 10px;">手气列表</div> <div style="text-align: left; color: #888; font-size: 14px;"> <div>整蛊专家 领了 ¥66.66</div> <div>幸运儿 领了 ¥52.40</div> <div>路人甲 领了 ¥12.34</div> <div style="color: #d43c33;">你 领了 ¥0.01</div> </div> <div style="margin-top: 15px; font-size: 12px; color: #999;"> 红包已存入零钱，可用于发红包 </div> `; // 添加点击跳转整蛊 result.addEventListener('click', function() { window.location.href = "https://www.bilibili.com/video/BV1GJ411x7h7"; }); } ``` 4. 添加CSS动画： ```css @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .result { animation: fadeIn 0.5s ease; } ``` 5. 增强移动端体验： ```javascript // 检测移动设备 if (/Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent)) { document.querySelector('.red-packet').style.width = '90%'; document.querySelector('.open-btn').style.padding = '15px 50px'; } ``` 代码逻辑注意事项： 1. 随机结果生成使用Math.random()可能不够均匀，可以考虑更复杂的随机算法 2. 动画效果需要考虑性能问题，避免过多重绘 3. 移动端适配需要测试不同设备尺寸 [2025-05-03 20:50:14 | AI写代码神器 | 804点数解答]
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>微信红包整蛊</title> <style> body { background-color: #f5f5f5; font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .red-packet { width: 3（804点数解答 | 2025-05-03 20:50:14）105
- ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>可以成为千一的恋人吗？</title> <style> body { display: flex; justify-content: center; align-items: center; height:100vh; margin: 0; background-color: #ACDEFF; font-family: 'Arial', sans-serif; text-align: center; transition: background-color 0.5s; } .container { background-color: #F9FFFF; padding: 30px; border-radius: 15px; box-shadow: 0 4px8px rgba(0,0,0, 0.1（1271点数解答 | 2025-07-26 08:49:50）102
- <!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> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: 'Arial', sans-serif; } .red-packet { position: relative; width: 300px; （455点数解答 | 2025-02-18 20:00:42）118
- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态爱心</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; } .heart { width: 100px; height: 100px; background-color: red; （122点数解答 | 2025-01-23 22:40:57）207
- <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <style> body{display:flex;justify-content:center; margin-top:200px;background-color:#171715;} #container{ display: flex; justify-content: center; align-items: flex-start; height: 500px; } #canvas3d{ width: 500px; height: 500px; } </style> <body> <div id='container'> <canvas i（35点数解答 | 2024-11-09 10:44:18）180
- html <!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> body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: #fff; padding: 20px; border-radius: 5px; box-shadow（189点数解答 | 2025-03-05 21:41:57）184
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>牛逼美女</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { text-align: center; font-family: 'Arial', sans-serif; } （180点数解答 | 2025-02-20 10:37:44）138
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>贪吃蛇游戏</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } #game-container { text-align: center; （891点数解答 | 2025-05-03 22:07:44）118
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击名字触发动画</title> <style> body { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .name-bu（180点数解答 | 2025-03-15 19:49:13）128
- HTML (index.html) <!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> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .contain（195点数解答 | 2025-04-10 15:45:03）144
- HTML (index.html) <!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> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .contain（725点数解答 | 2025-04-10 15:46:20）110
- <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>玫瑰曲线</title> <style> body { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-color: #f8f8f8; font-family: 'Arial', sans-serif; （176点数解答 | 2025-05-10 07:39:18）105