vnm6688.com

vnm6688.com H5单页应用

这是一个基于图片设计的在线娱乐平台H5单页应用，采用现代化的移动端设计理念。

功能特点

🎨 视觉设计

• 深色主题：采用渐变深色背景，营造高端娱乐氛围
• 卡片式布局：五个主要功能模块，每个都有独特的渐变背景
• 响应式设计：完美适配各种移动设备屏幕尺寸
• 现代化UI：使用毛玻璃效果、圆角设计和阴影效果

🎮 功能模块

1. 直播美女 (Ve đẹp sống động) - 5834 Sông
2. 老虎机 (máy đánh bạc) - 5834 trò chơi
3. 体育彩票 (Xô số thể thao) - 5834 trò chơi
4. 百家乐 (Baccarat) - 5834 trò chơi
5. 彩票 (Xô số) - 5834 trò chơi

✨ 交互效果

• 点击波纹效果：点击卡片时产生水波纹动画
• 悬停动画：鼠标悬停时卡片上浮和缩放
• 滚动动画：页面滚动时卡片依次出现
• 状态指示器：红绿圆点表示不同状态
• 实时时间显示：状态栏显示当前时间
• LIVE标签：直播模块带有脉冲动画的LIVE标识

📱 移动端优化

• 触摸反馈：触摸设备上的即时反馈
• 键盘导航：支持键盘方向键导航
• 无障碍访问：支持屏幕阅读器
• 性能优化：流畅的动画和过渡效果

技术栈

• HTML5：语义化标签和现代HTML特性
• CSS3：Flexbox布局、Grid布局、动画和渐变
• JavaScript ES6+：现代JavaScript特性
• 响应式设计：移动优先的设计理念
• CSS动画：关键帧动画和过渡效果

文件结构

h5/
├── index.html          # 主HTML文件
├── styles.css          # 样式文件
├── script.js           # JavaScript交互逻辑
└── README.md           # 项目说明文档

使用方法

1. 直接打开：在浏览器中直接打开 index.html 文件
2. 本地服务器：使用本地服务器运行以获得最佳体验
3. 移动设备：在手机浏览器中访问，体验最佳效果

本地服务器运行

# 使用Python
python -m http.server 8000

# 使用Node.js
npx serve .

# 使用PHP
php -S localhost:8000

然后在浏览器中访问 http://localhost:8000

浏览器兼容性

• ✅ Chrome 60+
• ✅ Firefox 55+
• ✅ Safari 12+
• ✅ Edge 79+
• ✅ 移动端浏览器

自定义配置

修改颜色主题

在 styles.css 中修改CSS变量：

:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --background-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

修改游戏数量

在 index.html 中修改游戏数量显示：

<p class="game-count"><span class="dot red"></span>5834 Sông</p>

添加新的功能模块

在 index.html 的 main-content 部分添加新的卡片：

<div class="card card-new">
    <div class="card-content">
        <div class="card-text">
            <h3>新功能名称</h3>
            <p class="game-count"><span class="dot green"></span>游戏数量</p>
        </div>
        <div class="card-image">
            <!-- 图标内容 -->
        </div>
    </div>
</div>

开发说明

添加新动画

在 script.js 中添加新的CSS动画：

const newAnimation = `
    @keyframes newAnimation {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
`;
style.textContent += newAnimation;

响应式断点

• 移动端：< 480px
• 小屏设备：< 360px
• 桌面端：> 480px

许可证

本项目仅供学习和演示使用。

更新日志

v1.0.0 (2024-01-01)

• 初始版本发布
• 实现基础UI和交互功能
• 添加响应式设计
• 优化移动端体验