微信红包整蛊页面代码大优化：动画、效果与体验全升级！

</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. 移动端适配需要测试不同设备尺寸 ######[AI写代码神器 | 804点数解答 | 2025-05-03 20:50:14]