Frontend Practice

这是一个前端练习项目集合，包含多个独立的小项目和练习。

项目预览地址

主要项目

• 时光计数器
• 贪吃蛇游戏 - 经典贪吃蛇游戏
• 快存

Cocos2d

• Game 1
• Game 2
• Game 3
• Game 4

工具类

• NT字符串转换 - NT字符串转换工具
• SQL字符串转换 - 字符串转SQL工具

动画效果

• 数字增长效果 - 数字动态增长动画
• 加载进度条 - 简单加载进度条
• 加载进度条(样式1) - 另一种风格的加载进度条
• 自由落体 - 自由落体动画效果
• 翻牌效果 - 卡片翻转动画
• 波浪效果 - 波浪动画效果测试
• 弹窗效果 - 弹窗动画效果测试
• 3D旋转效果 - CSS 3D旋转动画展示

滑块演示

• 滑块效果 1
• 滑块效果 2
• 滑块效果 3
• 滑块效果 4
• 滑块效果 5
• 幻灯片效果 1
• 幻灯片效果 2
• 幻灯片效果 3

布局演示

• CSS 网格布局 - CSS Grid 布局示例
• 联系人列表 - 联系人列表布局示例

测试页面

• 渲染引擎测试 - dot
• 渲染引擎测试 - ejs
• 浏览器回退测试
• Range

Canvas

• 滤镜
• 读取图片重新绘制

本地开发

1. 使用本地服务器打开项目

# 使用 Python 的简单 HTTP 服务器
python -m http.server

# 或使用 Node.js 的 http-server
npx http-server

2. 在浏览器中访问 http://localhost:8000 查看项目

技术栈

• HTML5
• CSS3
• JavaScript
• LESS/SCSS