https://github.com/reng99/demos

業餘demo的存放倉庫
https://github.com/reng99/demos

css css3 html html5 javascript

Last synced: 12 months ago
JSON representation

業餘demo的存放倉庫

• Host: GitHub
• URL: https://github.com/reng99/demos
• Owner: reng99
• License: mit
• Created: 2018-02-09T09:23:42.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-22T10:33:38.000Z (over 2 years ago)
• Last Synced: 2025-06-07T02:07:08.440Z (about 1 year ago)
• Topics: css, css3, html, html5, javascript
• Language: JavaScript
• Homepage:
• Size: 58.9 MB
• Stars: 19
• Watchers: 2
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![issues](https://img.shields.io/github/issues/reng99/demos.svg)](https://github.com/reng99/demos/issues)

[![forks](https://img.shields.io/github/forks/reng99/demos.svg)](https://github.com/reng99/demos/network/members)

[![stars](https://img.shields.io/github/stars/reng99/demos.svg)](https://github.com/reng99/demos/stargazers)

[![license](https://img.shields.io/github/license/reng99/demos.svg)](https://opensource.org/licenses/MIT)

业余时间做的demos，时不时更新。存在的意义：方便快速开发类似的功能。欢迎补充...

> 赞助

[捐助传送门](https://github.com/reng99/blogs/blob/master/src/other/donate.md)

> 许可证

[MIT](https://opensource.org/licenses/MIT)

> 相关案例

1. 循环轮播图

![carousel_demo.gif](./images/carousel_demo.gif)

2. 模态框弹出层

![modal_demo.gif](./images/modal_demo.gif)

3. 查看图片

![scaleImg_demo.gif](./images/scaleImg_demo.gif)

4. 地区三级联动

![area_demo.gif](./images/area_demo.gif)

5. 二级导航展示

![secondNav_demo.gif](./images/secondNav_demo.gif)

6. 倒计时

![countdown_demo.gif](./images/countdown_demo.gif)

7. 简单帧动画

![simple_frame_animation_demo.gif](./images/simple_frame_animation_demo.gif)

8. 伪加载

![loading_demo.gif](./images/loading_demo.gif)

9. 前端移动端截图工具html2canvas（切换到移动端调适效果更佳）

![html2canvas_demo.gif](./images/html2canvas_demo.gif)

10. 加载效果版本二 （体验更好效果，请勾选浏览器的Disable cache 和 Fast 3G进行验证）

![loading_version2_demo.gif](./images/loading_version2_demo.gif)

11. 粗略手写版

![handwriting_demo.gif](./images/handwriting_demo.gif)

12. 休闲游戏-五子棋

![gobang_demo.gif](./images/gobang_demo.gif)

13. 展开和折叠功能

![collapse_demo.gif](./images/collapse_demo.gif)

14. 可伸缩导航栏

![navbar](./images/navbar_demo.gif)

15. 两个DIV实现雷达扫描效果

![radar](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/13e8ab8adb5b4513beb2ab855e85895e~tplv-k3u1fbpfcp-watermark.image)