# Demo

**Repository Path**: maof/Demo

## Basic Information

- **Project Name**: Demo
- **Description**: 前端的一些小demo，包括几种布局以及一些特效
- **Primary Language**: HTML
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-29
- **Last Updated**: 2021-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端的一些demo


- [particle](https://github.com/kongchenglc/Demo/tree/master/particle)

  `Canvas`实现图片**粒子化**特效。[效果预览](https://kongchenglc.github.io/Demo/particle/index.html)。


- [nest](https://github.com/kongchenglc/Demo/tree/master/nest)

  `Canvas`实现`Nest`**线条跟随鼠标**的背景特效。[效果预览](https://kongchenglc.github.io/Demo/nest/myNest.html)。[博客详解](https://kongchenglc.github.io/blog/canvas20171217/)


- [modular Carousel diagram](https://github.com/kongchenglc/Demo/tree/master/modular%20Carousel%20diagram)

  原生`js`实现简单**轮播图**的组件化，可在同一页面多次使用。[效果预览](https://kongchenglc.github.io/Demo/modular%20Carousel%20diagram/index.html)。[博客详解](https://kongchenglc.github.io/blog/%E8%BD%AE%E6%92%AD%E5%9B%BE20170801/)  


- [3Dbox.html](https://github.com/kongchenglc/Demo/blob/master/3Dbox.html)

  `css3 + js`实现**3D盒子**，可用滚轮及拖拽调整视角。[效果预览](https://kongchenglc.github.io/Demo/3Dbox.html)。[博客详解](https://kongchenglc.github.io/blog/3Dbox20170827/)    


- [github404](https://github.com/kongchenglc/Demo/tree/master/github404)

  仿`github404`页面**动画**特效，原生`js`实现。[效果预览](https://kongchenglc.github.io/Demo/github404/github404.html)。[博客详解](https://kongchenglc.github.io/blog/github40420170720/)。  


- [snake.html](https://github.com/kongchenglc/Demo/blob/master/snake.html)

  `20`行代码的**贪吃蛇**，`canvas`实现。[效果预览](https://kongchenglc.github.io/Demo/snake.html)。[博客详解](https://kongchenglc.github.io/blog/%E8%B4%AA%E5%90%83%E8%9B%8720170613/)。


- [Frame animation](https://github.com/kongchenglc/Demo/blob/master/Frame%20animation/pomo.html)

  `css3`**帧动画**实现泼墨特效。[效果预览](https://kongchenglc.github.io/Demo/Frame%20animation/pomo.html)。


- [waterfull.html](https://github.com/kongchenglc/Demo/blob/master/waterfull.html)

  **瀑布流**布局，监听滚动事件实现**懒加载**。[效果预览](https://kongchenglc.github.io/Demo/waterfull.html)。


- [menu](https://github.com/kongchenglc/Demo/tree/master/menu)

  `css3`实现**导航条**`3d`特效。[效果预览](https://kongchenglc.github.io/Demo/menu/css3-menu.html)。  


- [Throttle and debounce.html](https://github.com/kongchenglc/Demo/blob/master/Throttle%20and%20debounce.html)

  **防抖**和**节流**。


- [border-transition.html](https://github.com/kongchenglc/Demo/blob/master/border-transition.html)

  **边框动画**特效，`css3`实现。[效果预览](https://kongchenglc.github.io/Demo/border-transition.html)。


- [bouncing ball.html](https://github.com/kongchenglc/Demo/blob/master/bouncing%20ball.html)

  确定速度不确定方向的**弹射**小球。[效果预览](https://kongchenglc.github.io/Demo/bouncing%20ball.html)。


- [clock.html](https://github.com/kongchenglc/Demo/blob/master/clock.html)

  由`h5 canvas`实现，一个读取系统时间的**钟表**。[效果预览](https://kongchenglc.github.io/Demo/clock.html)。


- [css3 printf.html](https://github.com/kongchenglc/Demo/blob/master/css3%20printf.html)

  等宽字体利用`ch`单位实现**打字动画**，`css3`实现。[效果预览](https://kongchenglc.github.io/Demo/css3%20printf.html)。


- [dice.html](https://github.com/kongchenglc/Demo/blob/master/dice.html)

  `css3`以及`flex`布局配合**画骰子**。[效果预览](https://kongchenglc.github.io/Demo/dice.html)。


- [drag.html](https://github.com/kongchenglc/Demo/blob/master/drag.html)

  原生`js`实现**鼠标拖动**`div`。[效果预览](https://kongchenglc.github.io/Demo/drag.html)。


- [twoLayoutWays.html](https://github.com/kongchenglc/Demo/blob/master/twoLayoutWays.html)

  前端常用两种布局方式：**双飞翼布局**以及**圣杯布局**。[效果预览](https://kongchenglc.github.io/Demo/twoLayoutWays.html)。


- [touchThrough.html](https://github.com/kongchenglc/Demo/blob/master/touchThrough.html)

  移动端**点透事件**。[效果预览](https://kongchenglc.github.io/Demo/touchThrough.html)。