# web-code

**Repository Path**: cl9000/web-code

## Basic Information

- **Project Name**: web-code
- **Description**: Web 前端资源库，含 CSS ， JavaScript 等前端开发资源，演示网页代码存储库、后期更改名称 
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-02
- **Last Updated**: 2021-06-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web-code

收集自开源网络，欢迎提交分享 🎉

## web小功能记录

#### 【更新日志】

| id | 文件名 | 描述 |
| --- | --- | --
| 00 | big-screen-vue-datav | 大屏数据 Vue|
| 01 | 01_login | 登录页 |
| 02 | 02_simple_full_pages | 简单全页面 |
| 03 | 03_welcome_like | 简单欢迎页 |
| 04 | 04_css_xuanzhuan | 简单旋转测试 |
| 05 | 05_cardId_photo | 更换证件照提示 |
| 06 | 06_鼠标canvas特效 | 跟随鼠标拖尾 |
| 07 | 07_pc_calendar | pc日历 |
| 08 | 08_uploadfile | 文件拖拽上传 |
| 09 | 09_时钟_灯笼_动字?粒钟/进度 | ... |
| 10 | 10_loading | loading |
| 11 | 11_mosaic_css | 悬停马赛克 |
| 12 | 12_404-CSS | 404-CSS |
| 13 | 13_darkmodejs | 暗黑模式 |
| 14 | 14_九宫格浮动 | 九宫格浮动动画 |
| 15 | 15_canvas元素平移滚动背景 | 15_canvas元素平移滚动背景 |
| 16 | 16_px-rem在线转化器 | 16_px-rem在线转化器 |
| ... | ... | ... |
| n | web-library | 其它web-lib |


* [00 大屏数据 Vue](big-screen-vue-datav ) <a href="http://cl9000.gitee.io/web-code/big-screen-vue-datav/"> ## => 【预览】</a>
* [01 登录页](01_login) <a href="http://cl9000.gitee.io/web-code/01_login/"> ## => 【预览】</a>
* [02 FullPage](02_simple_full_pages) <a href="http://cl9000.gitee.io/web-code/02_simple_full_pages/"> ## => 【预览】</a>
* [03 简单欢迎页](03_welcome_like) <a href="http://cl9000.gitee.io/web-code/03_welcome_like/"> ## => 【预览】</a>
* [04 简单旋转测试](04_css_xuanzhuan) <a href="http://cl9000.gitee.io/web-code/04_css_xuanzhuan/"> ## => 【预览】</a>
* [05 更换证件照提示](05_cardId_photo) <a href="http://cl9000.gitee.io/web-code/05_cardId_photo/"> ## => 【预览】</a>
* [06 跟随鼠标拖尾](06_鼠标canvas特效) <a href="http://cl9000.gitee.io/web-code/06_鼠标canvas特效/"> ## => 【预览】</a>
* [07 pc日历](07_pc_calendar) <a href="http://cl9000.gitee.io/web-code/07_pc_calendar/"> ## => 【预览】</a>
* [08 文件拖拽上传](08_uploadfile) <a href="http://cl9000.gitee.io/web-code/08_uploadfile/"> ## => 【预览】</a>
* [09_时钟_灯笼_动字?粒钟/进度](09_时钟_灯笼_动字?粒钟/进度) <a href="http://cl9000.gitee.io/web-code/web-library/3DGridEffect/"> ## => 【预览】</a>
* [10 Loading](10_loading) <a href="http://cl9000.gitee.io/web-code/10_loading/"> ## => 【预览】</a>
* [11 悬停马赛克](11_mosaic_css) <a href="http://cl9000.gitee.io/web-code/11_mosaic_css/"> ## => 【预览】</a>
* [12 404-CSS](12_404-CSS) <a href="http://cl9000.gitee.io/web-code/12_404-CSS/"> ## => 【预览】</a>
* [13Darkmode.js实现黑暗模式](13_darkmodejs) <a href="http://cl9000.gitee.io/web-code/13_darkmodejs/"> ## => 【预览】</a>
* [14_九宫格浮动](14_九宫格浮动) <a href="http://cl9000.gitee.io/web-code/14_九宫格浮动/"> ## => 【预览】</a>
* [15_canvas元素平移滚动背景](15_canvas元素平移滚动背景) <a href="http://cl9000.gitee.io/web-code/15_canvas元素平移滚动背景/"> ## => 【预览】</a>
* [16_px_rem在线转化器](16_px_rem在线转化器) <a href="http://cl9000.gitee.io/web-code/16_px_rem在线转化器/"> ## => 【预览】</a>
* [17_RGB_HEX在线转化器](17_RGB_HEX在线转化器) <a href="http://cl9000.gitee.io/web-code/17_RGB_HEX在线转化器/"> ## => 【预览】</a>
* [18_页面阅读进度条](18_页面阅读进度条) <a href="http://cl9000.gitee.io/web-code/18_页面阅读进度条/"> ## => 【预览】</a>
* [Granim.js 流体渐变](granim.js) <a href="https://sarcadass.github.io/granim.js/"> ## => 【预览】</a>



#### web-library
* [3D网格效果](web-library/3DGridEffect) <a href="http://cl9000.gitee.io/web-code/web-library/3DGridEffect/"> ## => 【预览】</a>
* [动态添加和删除 HTML 元素 jQuery 插件](web-library/addel) <a href="http://cl9000.gitee.io/web-code/web-library/addel/"> ## => 【预览】</a>
* [SVG 菜单图标弹性动画](web-library/AnimatedMenuIcon) <a href="http://cl9000.gitee.io/web-code/web-library/AnimatedMenuIcon/"> ## => 【预览】</a>
* [天气动画卡片](web-library/AnimatedWeatherCards) <a href="http://cl9000.gitee.io/web-code/web-library/AnimatedWeatherCards/"> ## => 【预览】</a>
* [单页面文章效果](web-library/ArticleIntroEffects) <a href="http://cl9000.gitee.io/web-code/web-library/ArticleIntroEffects/"> ## => 【预览】</a>
* [音频可视化](web-library/AudioVisualizers) <a href="http://cl9000.gitee.io/web-code/web-library/AudioVisualizers/"> ## => 【预览】</a>
* [创意按钮样式](web-library/CreativeButtons) <a href="http://cl9000.gitee.io/web-code/web-library/CreativeButtons/"> ## => 【预览】</a>
* [21 种创意链接效果](web-library/CreativeLinkEffects) <a href="http://cl9000.gitee.io/web-code/web-library/CreativeLinkEffects/"> ## => 【预览】</a>
* [13 种创意 loading 效果](web-library/CreativeLoadingEffects) <a href="http://cl9000.gitee.io/web-code/web-library/CreativeLoadingEffects/"> ## => 【预览】</a>
* [酷炫的字母动画](web-library/DecorativeLetterAnimations) <a href="http://cl9000.gitee.io/web-code/web-library/DecorativeLetterAnimations/"> ## => 【预览】</a>
* [拖拽互动效果](web-library/DragDropInteractions) <a href="http://cl9000.gitee.io/web-code/web-library/DragDropInteractions/"> ## => 【预览】</a>
* [9 种简单的图标悬停状态效果](web-library/IconHoverEffects) <a href="http://cl9000.gitee.io/web-code/web-library/IconHoverEffects/"> ## => 【预览】</a>
* [沉浸式视频模板](web-library/immersive-video-template) <a href="http://cl9000.gitee.io/web-code/web-library/immersive-video-template/"> ## => 【预览】</a>
* [交互式拖放为页面元素着色](web-library/InteractiveColoringConcept) <a href="http://cl9000.gitee.io/web-code/web-library/InteractiveColoringConcept/"> ## => 【预览】</a>
* [iphone X 缺口滚动条](web-library/iphone-notch-scroll) <a href="http://cl9000.gitee.io/web-code/web-library/iphone-notch-scroll/"> ## => 【预览】</a>
* [iphone X 缺口滚动条2](web-library/iphone-notch-scroll-2) <a href="http://cl9000.gitee.io/web-code/web-library/iphone-notch-scroll-2/"> ## => 【预览】</a>
* [jQuery 问答测试插件](web-library/jQuery-Quiz) <a href="http://cl9000.gitee.io/web-code/web-library/jQuery-Quiz/"> ## => 【预览】</a>
* [19 种漂亮的模态对话框效果](web-library/ModalWindowEffects) <a href="http://cl9000.gitee.io/web-code/web-library/ModalWindowEffects/"> ## => 【预览】</a>
* [页面变形过渡效果](web-library/MorphingPageTransition) <a href="http://cl9000.gitee.io/web-code/web-library/MorphingPageTransition/"> ## => 【预览】</a>
* [全屏滚动 jQuery 插件](web-library/pagePiling.js) <a href="http://cl9000.gitee.io/web-code/web-library/pagePiling.js/"> ## => 【预览】</a>
* [视差效果幻灯片轮播插件](web-library/parallax-Flickity) <a href="http://cl9000.gitee.io/web-code/web-library/parallax-Flickity/"> ## => 【预览】</a>
* [12 种基于 flexbox 的响应式创意定价表效果](web-library/PricingTablesInspiration) <a href="http://cl9000.gitee.io/web-code/web-library/PricingTablesInspiration/"> ## => 【预览】</a>
* [创意按钮进度条样式](web-library/ProgressButtonStyles) <a href="http://cl9000.gitee.io/web-code/web-library/ProgressButtonStyles/"> ## => 【预览】</a>
* [字母透明的响应视差幻灯片](web-library/ResponsiveParallaxDrag-Slider) <a href="http://cl9000.gitee.io/web-code/web-library/ResponsiveParallaxDrag-Slider/"> ## => 【预览】</a>
* [11 种互动效果搜索界面](web-library/SearchUIEffects) <a href="http://cl9000.gitee.io/web-code/web-library/SearchUIEffects/"> ## => 【预览】</a>
* [粘性页脚](web-library/sticky-footers) <a href="http://cl9000.gitee.io/web-code/web-library/sticky-footers/"> ## => 【预览】</a>
* [SVG 绘图动画](web-library/SVGDrawingAnimation) <a href="http://cl9000.gitee.io/web-code/web-library/SVGDrawingAnimation/"> ## => 【预览】</a>
* [使用 SVG 创建 Material Design 涟漪纹波效果](web-library/svgripples) <a href="http://cl9000.gitee.io/web-code/web-library/svgripples/"> ## => 【预览】</a>
* [垂直固定导航(侧栏)](web-library/vertical-fixed-navigation) <a href="http://cl9000.gitee.io/web-code/web-library/vertical-fixed-navigation/"> ## => 【预览】</a>
* [摇摆弹性效果幻灯片](web-library/WobblySlideshowEffect) <a href="http://cl9000.gitee.io/web-code/web-library/WobblySlideshowEffect/"> ## => 【预览】</a>

### web-css-html
* [动画按钮CSS](web-css-html/css3-animated-buttons) <a href="http://cl9000.gitee.io/web-code/web-css-html/css3-animated-buttons/"> ## => 【预览】</a>
* [新拟物风格UI元素 CSS3](web-css-html/css3-neumorphic-elements) <a href="http://cl9000.gitee.io/web-code/web-css-html/css3-neumorphic-elements/"> ## => 【预览】</a>
* [3D 卧室动画 CSS3](web-css-html/css3-3d-bedroom) <a href="http://cl9000.gitee.io/web-code/web-css-html/css3-3d-bedroom/"> ## => 【预览】</a>
* [3D 卡片翻转动画 CSS3](web-css-html/css3-3d-card-rotate) <a href="http://cl9000.gitee.io/web-code/web-css-html/css3-3d-card-rotate/"> ## => 【预览】</a>
* [3D无限循环图片流 HTML5](web-css-html/html5-3d-infinite-flow) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-3d-infinite-flow/"> ## => 【预览】</a>
* [3D 视差相册画廊 HTML5](web-css-html/html5-3d-parallax-photos) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-3d-parallax-photos/"> ## => 【预览】</a>
* [3D全屏相册动画 HTML5](web-css-html/html5-3d-slider) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-3d-slider/"> ## => 【预览】</a>
* [React.js 扭曲相册焦点图动画](web-css-html/react-js-image-slider) <a href="http://cl9000.gitee.io/web-code/web-css-html/react-js-image-slider/"> ## => 【预览】</a>
* [SVG 动画Tab菜单栏](web-css-html/svg-animated-tab-menu) <a href="http://cl9000.gitee.io/web-code/web-css-html/svg-animated-tab-menu/"> ## => 【预览】</a>
* [Vue.js 流程图插件 可自定义流程节点事件](web-css-html/vue-js-flow-chart) <a href="http://cl9000.gitee.io/web-code/web-css-html/vue-js-flow-chart/"> ## => 【预览】</a>
* [Vue.js任务列表 可本地存储任务数据](web-css-html/vue-js-todo-list) <a href="http://cl9000.gitee.io/web-code/web-css-html/vue-js-todo-list/"> ## => 【预览】</a>
* [动画 Tab-Bar](web-css-html/animated-tab-bar_v2.0) <a href="http://cl9000.gitee.io/web-code/web-css-html/animated-tab-bar_v2.0/"> ## => 【预览】</a>
* [Amazion-Tab-Bar](web-css-html/amazion-tab-bar) <a href="http://cl9000.gitee.io/web-code/web-css-html/amazion-tab-bar/"> ## => 【预览】</a>
* [动画 Nav-Bar](web-css-html/aNavigation-Bar) <a href="http://cl9000.gitee.io/web-code/web-css-html/Navigation-Bar/"> ## => 【预览】</a>
* [JS 随机密码生成器，可控密码复杂度](web-css-html/js-passwd-generator) <a href="http://cl9000.gitee.io/web-code/web-css-html/js-passwd-generator/"> ## => 【预览】</a>
* [JS 实现带二级菜单的图片轮播动画](web-css-html/js-image-player-menu) <a href="http://cl9000.gitee.io/web-code/web-css-html/js-image-player-menu/"> ## => 【预览】</a>
* [CSS3 水墨风格背景动画按钮](web-css-html/css3-ink-button) <a href="http://cl9000.gitee.io/web-code/web-css-html/css3-ink-button/"> ## => 【预览】</a>
* [HTML5 CSS3颜色选取并复制十六进制值](web-css-html/html5-css3-color-copy) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-css3-color-copy/"> ## => 【预览】</a>
* [HTML5 WebGL实验 超酷的HTML5 Canvas波浪墙](web-css-html/voxels-liquid) <a href="http://cl9000.gitee.io/web-code/web-css-html/voxels-liquid/"> ## => 【预览】</a>
* [HTML5版Flappy Bird游戏在线演示](web-css-html/html5-flappy-bird) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-flappy-bird/"> ## => 【预览】</a>
* [HTML5 Canvas画板画图工具](web-css-html/html5-canvas-drawing) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-canvas-drawing/"> ## => 【预览】</a>
* [HTML5 SVG Tab滑块菜单](web-css-html/html5-svg-tab-slider) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-svg-tab-slider/"> ## => 【预览】</a>
* [HTML5 Canvas 3D跳动Loading加载动画](web-css-html/html5-canvas-3d-loading) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-canvas-3d-loading/"> ## => 【预览】</a>
* [HTML5 颜色选择器 实时输出RGB值](web-css-html/html5-color-picker-rgb) <a href="http://cl9000.gitee.io/web-code/web-css-html/html5-color-picker-rgb/"> ## => 【预览】</a>





### 直达第三方官网
* [Bespoke.js–基于浏览器的演示文稿微框架] <a href="http://markdalgleish.com/projects/bespoke.js/"> ## => 【预览】</a>
* [Pressure.js – 用于处理Force Touch，3D Touch的JavaScript库] <a href="https://pressurejs.com/"> ## => 【预览】</a> 
* [cool-admin(midway版)一个很酷的后台权限管理系统，开源，模块化、插件化、极速开发CRUD] <a href="https://gitee.com/cl9000/cool-admin-midway"> ## => 【预览】</a> 





## 其它
```
echo "# web-code" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/cl9000/web-code.git
git push -u origin master
```