开源项目 kongchenglc/Demo 使用教程

1. 项目的目录结构及介绍

kongchenglc/Demo/
├── Frame animation
├── github404
├── menu
├── modular Carousel diagram
├── nest
├── particle
├── 3Dbox.html
├── LICENSE.md
├── README.md
├── Throttle and debounce.html
├── border-transition.html
├── bouncing ball.html
├── clock.html
├── css3 printf.html
├── dice.html
├── drag.html
├── selectInDiv.html
├── snake.html
├── touchThrough.html
├── twoLayoutWays.html
└── waterfull.html

目录结构介绍

• Frame animation: 包含帧动画相关的文件。
• github404: 包含仿GitHub 404页面动画特效的文件。
• menu: 包含导航条3D特效的文件。
• modular Carousel diagram: 包含原生JS实现简单轮播图的组件化文件。
• nest: 包含Nest线条跟随鼠标的背景特效的文件。
• particle: 包含图片粒子化特效的文件。
• 3Dbox.html: CSS3 + JS实现3D盒子的文件。
• LICENSE.md: 项目的许可证文件。
• README.md: 项目的介绍文件。
• Throttle and debounce.html: 防抖和节流的实现文件。
• border-transition.html: 边框动画特效的实现文件。
• bouncing ball.html: 弹射小球的实现文件。
• clock.html: 由H5 Canvas实现的钟表文件。
• css3 printf.html: 等宽字体利用ch单位实现打字动画的文件。
• dice.html: CSS3以及Flex布局配合画骰子的文件。
• drag.html: 原生JS实现鼠标拖动DIV的文件。
• selectInDiv.html: 在DIV中选择元素的实现文件。
• snake.html: 20行代码的贪吃蛇实现文件。
• touchThrough.html: 移动端点透事件的实现文件。
• twoLayoutWays.html: 前端常用两种布局方式（双飞翼布局以及圣杯布局）的实现文件。
• waterfull.html: 瀑布流布局的实现文件。

2. 项目的启动文件介绍

由于该项目是一个前端的小demo集合，没有统一的启动文件。每个demo都是一个独立的HTML文件，可以直接在浏览器中打开运行。例如：

• 要查看3D盒子特效，可以直接打开3Dbox.html文件。
• 要查看贪吃蛇游戏，可以直接打开snake.html文件。

3. 项目的配置文件介绍

该项目没有统一的配置文件，每个demo都是独立的HTML文件，配置和代码都直接写在HTML文件中。如果需要修改某个demo的配置，可以直接编辑对应的HTML文件。

例如，要修改clock.html中的钟表样式，可以直接编辑该文件中的CSS代码部分。