超炫酷！球球大作战H5启动页加载100%，六大功能按钮音效动画齐上阵！

以下是一个满足你需求的 HTML、CSS 和 JavaScript 代码示例，用于创建一个炫酷的启动页和主页面，适配 iOS 手机的 H5 环境。 ```html <!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 { margin: 0; padding: 0; font-family: Arial, sans-serif; overflow: hidden; } /* 启动页样式 */ #splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #ff00cc, #333399); display: flex; justify-content: center; align-items: center; z-index: 1000; animation: fadeOut 1s ease-in-out 5s forwards; } #loading-bar { width: 300px; height: 20px; background-color: #fff; border-radius: 10px; overflow: hidden; } #loading-progress { width: 0; height: 100%; background: linear-gradient(90deg, #00ff00, #00ffff); border-radius: 10px; animation: loading 5s ease-in-out forwards; } /* 主页面样式 */ #main-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://source.unsplash.com/random/1920x1080') no-repeat center center fixed; background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; animation: fadeIn 1s ease-in-out 5s forwards; } h1 { font-size: 48px; color: #fff; text-shadow: 0 0 10px #ff00cc; } .function-buttons { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; } .function-button { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(45deg, #ff00cc, #333399); margin: 10px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 18px; cursor: pointer; transition: transform 0.3s ease-in-out; } .function-button:hover { transform: scale(1.1); } /* 动画效果 */ @keyframes loading { 0% { width: 0; } 100% { width: 100%; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } </style> </head> <body>  <div id="splash-screen"> <div id="loading-bar"> <div id="loading-progress"></div> </div> </div>  <div id="main-screen"> <h1>球球大作战</h1> <div class="function-buttons"> <div class="function-button" onclick="playSoundAndAnimate(this)">功能 1</div> <div class="function-button" onclick="playSoundAndAnimate(this)">功能 2</div> <div class="function-button" onclick="playSoundAndAnimate(this)">功能 3</div> <div class="function-button" onclick="playSoundAndAnimate(this)">功能 4</div> <div class="function-button" onclick="playSoundAndAnimate(this)">功能 5</div> <div class="function-button" onclick="playSoundAndAnimate(this)">功能 6</div> </div> </div> <audio id="click-sound" src="https://www.soundjay.com/button/beep-07.wav"></audio> <script> function playSoundAndAnimate(button) { const sound = document.getElementById('click-sound'); sound.play(); button.style.animation = 'buttonAnimate 0.5s ease-in-out'; button.addEventListener('animationend', () => { button.style.animation = ''; }); } function fadeOutSplash() { const splashScreen = document.getElementById('splash-screen'); splashScreen.style.display = 'none'; } function fadeInMain() { const mainScreen = document.getElementById('main-screen'); mainScreen.style.opacity = 1; } </script> </body> </html> ``` 代码解释 1. 启动页：使用 `#splash-screen` 元素创建启动页，设置了炫酷的渐变。`#loading-bar` 和 `#loading-progress` 用于模拟加载进度条，通过 `animation` 属性实现动态加载效果。 2. 主页面：使用 `#main-screen` 元素创建主页面，设置了动态图片。`h1` 标签显示“球球大作战”，`.function-buttons` 容器包含六个圆形功能按钮。 3. 动画效果：通过 CSS 动画 `loading`、`fadeOut` 和 `fadeIn` 实现加载进度、启动页淡出和主页面淡入效果。 4. 声音效果：使用 `<audio>` 标签添加点击音效，通过 JavaScript 函数 `playSoundAndAnimate` 播放音效并触发按钮动画。额外注意逻辑点 1. 音频文件路径：代码中使用的音频文件路径是一个示例，实际使用时需要确保音频文件存在并正确引用。 2. 兼容性：虽然代码在大多数现代浏览器和 iOS 设备上可以正常运行，但不同设备的性能和显示效果可能会有所差异，需要进行充分的测试。 3. 响应式设计：为了确保在不同屏幕尺寸的 iOS 设备上都能有良好的显示效果，建议进一步优化 CSS 样式，使用媒体查询等技术实现响应式布局。 ######[AI写代码神器 | 1687点数解答 | 2025-06-15 00:08:41]

服务商

更多选项

快捷项

自定义