# webcode **Repository Path**: flashaxe/webcode ## Basic Information - **Project Name**: webcode - **Description**: 用于存放个人编写的html前端代码示例。 - **Primary Language**: HTML - **License**: CC0-1.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 125 - **Forks**: 33 - **Created**: 2020-12-11 - **Last Updated**: 2026-10-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # webcode 个人制作的前端演示代码集合。**253 个演示**，按类别整理。 **在线浏览**：直接用浏览器打开根目录的 [`index.html`](index.html) 即可（带搜索、分类筛选、随机打开）。 --- ## 演示目录 ### 加载动画 (17) - [仿2042的loading特效](2042-loading/index.html)（2042 Loading） — `2042-loading` - [两个变换的圆形动画](2circles/index.html)（2 Circles） — `2circles` - [三个转动的圆环动画效果](3-rings-load/index.html)（3 Rings Load） — `3-rings-load` - [动态条载入画面](bar-loading/index.html)（Bar Loading） — `bar-loading` - [使用CSS变量控制动画执行顺序](box-loading/index.html)（Box Loading） — `box-loading` - [四叶草loading动画](clover-loading/index.html)（Clover Loading） — `clover-loading` - [圆形错位文字loading特效](disk-loading/index.html)（Disk Loading） — `disk-loading` - [CSS制作仿DNA效果](DNA-loading/index.html)（DNA Loading） — `DNA-loading` - [六边形载入文字动画](hex-loading/index.html)（Hex Loading） — `hex-loading` - [无限符号的动态loading](infinity-loading/index.html)（Infinity Loading） — `infinity-loading` - [CSS制作吃豆人动画](pacman-loading/index.html)（Pacman Loading） — `pacman-loading` - [传送门载入动画](portal-loading/index.html)（Portal Loading） — `portal-loading` - [环形边框加载动画](ring-border-loading/index.html)（Ring Border Loading） — `ring-border-loading` - [圆环 loading 动画](ring-load/index.html)（Ring Load） — `ring-load` - [CSS 3D 环绕文字特效](ring-text-loading/index.html)（Ring Text Loading） — `ring-text-loading` - [利用阴影及缩放制作浮出动画效果](shadow-loading/index.html)（Shadow Loading） — `shadow-loading` - [彩色文字loading动画](text-loading/index.html)（Text Loading） — `text-loading` ### 时钟与倒计时 (18) - [倒计时显示特效](count-down/index.html)（Count Down） — `count-down` - [点阵图样倒计时动画](dots-countdown/index.html)（Dots Countdown） — `dots-countdown` - [js翻页时钟](flip-clock/index.html)（Flip Clock） — `flip-clock` - [页面浮动的液晶时钟](float-clock/index.html)（Float Clock） — `float-clock` - [JS制作指针式时钟](js-clock/index.html)（JS Clock） — `js-clock` - [js制作彩条时钟](js-colorbar-clock/index.html)（JS Colorbar Clock） — `js-colorbar-clock` - [模拟辉光管数字时钟](js-glow-clock/index.html)（JS Glow Clock） — `js-glow-clock` - [js制作环形文字时钟](js-text-clock/index.html)（JS Text Clock） — `js-text-clock` - [滚轮控制的定时器效果](knob-timer/index.html)（Knob Timer） — `knob-timer` - [利用指针钟表组成文字时钟](number-clock/index.html)（Number Clock） — `number-clock` - [动态粒子组合时钟特效](particle-clock/index.html)（Particle Clock） — `particle-clock` - [粒子下落倒计时动画](particles-countdown/index.html)（Particles Countdown） — `particles-countdown` - [圆环粒子组成的时钟](particles-ring-clock/index.html)（Particles Ring Clock） — `particles-ring-clock` - [canvas弧线构成的数字时钟](ring-clock/index.html)（Ring Clock） — `ring-clock` - [CSS制作沙漏动画](sandglass/index.html)（Sandglass） — `sandglass` - [扇形擦除动画效果](sector-countdown/index.html)（Sector Countdown） — `sector-countdown` - [太空漫游者](spacewalker/index.html)（Spacewalker） — `spacewalker` - [番茄工作法计时器](tomato-clock/index.html)（Tomato Clock） — `tomato-clock` ### 粒子特效 (23) - [粒子组成的3D球体](3Dparticles/index.html)（3D Particles） — `3Dparticles` - [旋转变化的倒计时粒子效果](around-particles/index.html)（Around Particles） — `around-particles` - [旋转的圆点动画](aroungd-dots/index.html)（Around Dots） — `aroungd-dots` - [戴森球loading动画](dyson-sphere/index.html)（Dyson Sphere） — `dyson-sphere` - [烧绳子小动画](fire-line/index.html)（Fire Line） — `fire-line` - [翻转下落的波点特效](float-dots/index.html)（Float Dots） — `float-dots` - [受重力影响的粒子](ground-particle/index.html)（Ground Particle） — `ground-particle` - [六边形半透明粒子渐显渐隐动画效果](hex-particles/index.html)（Hex Particles） — `hex-particles` - [图片粒子化特效](img2particle/index.html)（Image → Particle 图片转粒子） — `img2particle` - [JS制作动态的星空背景](js-flying-star/index.html)（JS Flying Star） — `js-flying-star` - [js制作动态流星雨](JS-meteors/index.html)（JS Meteors） — `JS-meteors` - [随机六方向移动的粒子效果](moving-dots/index.html)（Moving Dots） — `moving-dots` - [利用固定数量的粒子动态组成不同的图案](moving-particles/index.html)（Moving Particles） — `moving-particles` - [原生JS实现particle.js的粒子效果](particle-background/index.html)（Particle Background） — `particle-background` - [圆形粒子扩散效果演示](particle-demos/index.html)（Particle Demos） — `particle-demos` - [动态粒子绘制图片](particle-img/index.html)（Particle Image） — `particle-img` - [跟随鼠标的粒子特效](particle-mouse-background/index.html)（Particle Mouse Background） — `particle-mouse-background` - [粒子传送门特效](particle-portal/index.html)（Particle Portal） — `particle-portal` - [受鼠标扰动的粒子效果](particles-gravity/index.html)（Particles Gravity） — `particles-gravity` - [利用柏林噪音算法扩展粒子的移动效果](perlin-particles/index.html)（Perlin Particles） — `perlin-particles` - [鼠标扰动的粒子图片](pic2particles/index.html)（Picture → Particles 图片转粒子） — `pic2particles` - [多边形粒子动画](polygon-particles/index.html)（Polygon Particles） — `polygon-particles` - [canvas星星生成器](star-maker/index.html)（Star Maker） — `star-maker` ### 文字特效 (15) - [改变背景图片](background-text/index.html)（Background Text） — `background-text` - [撕裂的文字特效](broken-text/index.html)（Broken Text） — `broken-text` - [炸开的文字特效](explorer-text/index.html)（Explorer Text） — `explorer-text` - [粒子火焰效果](flaming-text/index.html)（Flaming Text） — `flaming-text` - [点击飘出的文字特效](float-text/index.html)（Float Text） — `float-text` - [CSS制作折纸文字特效](fold-text/index.html)（Fold Text） — `fold-text` - [像素点拼成的文字特效](js-text-pix/index.html)（JS Text Pixel 文字像素化） — `js-text-pix` - [发光文字霓虹灯效果](neon-light/index.html)（Neon Light） — `neon-light` - [混合模式的文字动态背景效果](neon-text/index.html)（Neon Text） — `neon-text` - [可编辑文字的倒影效果](reflect-text/index.html)（Reflect Text） — `reflect-text` - [利用:has()伪类完成段落展开及隐藏效果](text-hidden/index.html)（Text Hidden） — `text-hidden` - [文字粒子效果](text-particles/index.html)（Text Particles） — `text-particles` - [文字背景切换特效](text2background/index.html)（Text → Background 文字填充背景） — `text2background` - [分段渐显式标题](title-ani/index.html)（Title Animated） — `title-ani` - [反色动态文字效果演示](transform-text/index.html)（Transform Text） — `transform-text` ### 背景与氛围 (19) - [CSS制作分层按钮](4layers-bottom/index.html)（4 Layers Bottom） — `4layers-bottom` - [头晕脑涨的动态背景效果](anibackground/index.html)（Anibackground） — `anibackground` - [纯CSS 背景渐隐式切换特效](fade-background/index.html)（Fade Background） — `fade-background` - [动态星空背景，利用单一随机值关联颜色及移动速度](fade-stars/index.html)（Fade Stars） — `fade-stars` - [利用fontawesome将图标绘制在canvas上](falling-icons/index.html)（Falling Icons） — `falling-icons` - [下落的星星背景动画](falling-stars/index.html)（Falling Stars） — `falling-stars` - [利用JS+CSS制作动态透镜效果](focus-background/index.html)（Focus Background） — `focus-background` - [根据鼠标位置改变颜色和尺寸的六边形动态效果](hex-wallpaper-1/index.html)（Hex Wallpaper 1） — `hex-wallpaper-1` - [动态六边形背景JS特效](hexbackground/index.html)（Hexbackground） — `hexbackground` - [六边形动画背景](hexs-background/index.html)（Hexs Background） — `hexs-background` - [动态漏光背景效果](js-back-light/index.html)（JS Back Light） — `js-back-light` - [JS制作动态泡泡背景](js-bubble-back/index.html)（JS Bubble Back） — `js-bubble-back` - [js制作动态雪花背景](js-snow/index.html)（JS Snow） — `js-snow` - [纯CSS制作熔岩灯特效](lava-light/index.html)（Lava Light） — `lava-light` - [mix-blend-mode混合背景实例](mix-background/index.html)（Mix Background） — `mix-background` - [移动背景滑块](moving-backblock/index.html)（Moving Backblock） — `moving-backblock` - [正多边形平铺画布算法](polygon-wallpaper/index.html)（Polygon Wallpaper） — `polygon-wallpaper` - [旋转的六边形背景动画](rolling-hexs/index.html)（Rolling Hexs） — `rolling-hexs` - [星光粒子效果](star-light/index.html)（Star Light） — `star-light` ### 鼠标与交互 (15) - [环绕鼠标的粒子效果](around-mouse-particles/index.html)（Around Mouse Particles） — `around-mouse-particles` - [利用页面元素围绕鼠标旋转的效果](delay-round-mouse/index.html)（Delay Round Mouse） — `delay-round-mouse` - [跟随鼠标的粒子特效](js-bubble-mouse/index.html)（JS Bubble Mouse） — `js-bubble-mouse` - [使用span元素制作鼠标跟随效果](js-mouse-tail/index.html)（JS Mouse Tail） — `js-mouse-tail` - [使用类方式制作鼠标粒子特效](magic-particle-mouse/index.html)（Magic Particle Mouse） — `magic-particle-mouse` - [自定义鼠标样式](mouse-effect/index.html)（Mouse Effect） — `mouse-effect` - [鼠标移动和点击的粒子效果](mouse-particles/index.html)（Mouse Particles） — `mouse-particles` - [彩色的鼠标尾巴](mouse-tail/index.html)（Mouse Tail） — `mouse-tail` - [使用自定义的鼠标样式替换默认样式](new-cursor/index.html)（New Cursor） — `new-cursor` - [粒子光斑动态背景效果](pointer-background/index.html)（Pointer Background） — `pointer-background` - [环绕鼠标的文字特效](ring-text-pointer/index.html)（Ring Text Pointer） — `ring-text-pointer` - [跟随鼠标旋转的JS特效](rotate-to-mouse/index.html)（Rotate To Mouse） — `rotate-to-mouse` - [单独引入JS的彩色泡泡效果](single-js-mouse-ani/index.html)（Single JS Mouse Animated） — `single-js-mouse-ani` - [鼠标滚轮事件实现方式](wheel-event/index.html)（Wheel Event） — `wheel-event` - [鼠标滚轮事件控制的可视化示例](wheel-limit/index.html)（Wheel Limit） — `wheel-limit` ### 3D 与 Three.js (9) - [纯CSS制作伪3D菜单](3D-cube/index.html)（3D Cube） — `3D-cube` - [分层排列的子元素通过对父元素的3D变型做出透视效果](3D-form/index.html)（3D Form） — `3D-form` - [使用CSS制作透明3D盒子](CSS-3D-box/index.html)（CSS 3D Box） — `CSS-3D-box` - [滚动方块动画](roll-cube/index.html)（Roll Cube） — `roll-cube` - [three.js 笔记01 添加物体和渲染](three.js-01/index.html)（Three.js 01） — `three.js-01` - [three.js 笔记02 内置几何体及简单参数说明](three.js-02/index.html)（Three.js 02） — `three.js-02` - [three.js 使用group方法批量向场景中添加元素](three.js-03/index.html)（Three.js 03） — `three.js-03` - [在场景中移动物体](three.js-05/index.html)（Three.js 05） — `three.js-05` - [基础的粒子生成排列](three.js-06/index.html)（Three.js 06） — `three.js-06` ### Canvas 与图形 (38) - [利用半圆组成的canvas动画效果](arcs-ani/index.html)（Arcs Animated） — `arcs-ani` - [利用Canvas绘制礼花效果](canvas-fireworks/index.html)（Canvas Fireworks） — `canvas-fireworks` - [利用混合滤镜实现画布的遮盖效果](canvas-mask/index.html)（Canvas Mask） — `canvas-mask` - [使用画布制作黑客帝国式字符动画](canvas-matrix/index.html)（Canvas Matrix） — `canvas-matrix` - [canvas pattern方式填充背景](canvas-pattern/index.html)（Canvas Pattern） — `canvas-pattern` - [制作带有拖影效果的canvas粒子](canvas-rain/index.html)（Canvas Rain） — `canvas-rain` - [利用画布绘制可控角色](canvas-sprite/index.html)（Canvas Sprite） — `canvas-sprite` - [clip path 效果](clip-path/index.html)（Clip Path） — `clip-path` - [clip-path方式实现多边形剪切](clip-path-shapes/index.html)（Clip Path Shapes） — `clip-path-shapes` - [晃动的彩灯动画](color-light/index.html)（Color Light） — `color-light` - [CSS及JS绘制任意角度的扇形](css-sector/index.html)（CSS Sector） — `css-sector` - [直线画弧的canvas小动画](cube-sweep/index.html)（Cube Sweep） — `cube-sweep` - [使用CSS绘制水滴样式](drip-by-css/index.html)（Drip By CSS） — `drip-by-css` - [跟随鼠标飞行的小火箭](flying-rocket/index.html)（Flying Rocket） — `flying-rocket` - [分型小树林](fractal-tree/index.html)（Fractal Tree） — `fractal-tree` - [利用CSS制作循环发光的效果](infinity-loop/index.html)（Infinity Loop） — `infinity-loop` - [js 制作文本渐显特效](js-ani-paper/index.html)（JS Animated Paper） — `js-ani-paper` - [js制作黑客帝国下落字符背景特效](js-matrix/index.html)（JS Matrix） — `js-matrix` - [canvas绘制花式画板](kaleido/index.html)（Kaleido） — `kaleido` - [发光的透明logo](lighting-logo/index.html)（Lighting Logo） — `lighting-logo` - [流动的液体模拟效果](liquid-ani/index.html)（Liquid Ani 液态动画） — `liquid-ani` - [流体效果的两个实例](liquid-ani/sampls/drop/index.html)（Drop 液滴） — `liquid-ani/sampls/drop` - [流体效果的两个实例](liquid-ani/sampls/pic-mask/index.html)（Pic Mask 图片遮罩） — `liquid-ani/sampls/pic-mask` - [canvas绘制利萨茹曲线动画](Lissajous/index.html)（Lissajous 李萨如曲线） — `Lissajous` - [利用黑客帝国的方式绘制图片](matrix-face/index.html)（Matrix Face） — `matrix-face` - [css制作牛顿摆动画](newtons-cradle/index.html)（Newtons Cradle） — `newtons-cradle` - [利用柏林噪音函数绘制曲线](perlin-noise-1/index.html)（Perlin Noise 1） — `perlin-noise-1` - [动态波纹涟漪背景效果](ripples-ani/index.html)（Ripples Animated） — `ripples-ani` - [动感光波](rolling-light/index.html)（Rolling Light） — `rolling-light` - [canvas动画生成的正弦曲线和余弦曲线](sin-cos/index.html)（Sin Cos） — `sin-cos` - [精灵动画显示方式](sprite-animation/index.html)（Sprite Animation） — `sprite-animation` - [svg图片在html里的动态效果](svg-animation/index.html)（SVG Animation） — `svg-animation` - [三角贪食蛇动画](tri-ani/index.html)（Tri Animated） — `tri-ani` - [分形三角形动画](triangles/index.html)（Triangles） — `triangles` - [利用柏林噪声算法制作波浪效果](wave-bottom/index.html)（Wave Bottom） — `wave-bottom` - [动态水面效果loading动画](wave-box/index.html)（Wave Box） — `wave-box` - [环绕圆心的正弦曲线](wave-cricle/index.html)（Wave Circle） — `wave-cricle` - [根据P5.js 改写的造波器示例](wave-rings/index.html)（Wave Rings） — `wave-rings` ### 游戏 (16) - [JS制作打砖块小游戏](block-breaker/index.html)（Block Breaker） — `block-breaker` - [移动鼠标收集圆环，改变粒子的移动状态。](collection-game/index.html)（Collection Game） — `collection-game` - [JS制作生命游戏](js-life-game/index.html)（JS Life Game） — `js-life-game` - [JS制作贪食蛇](js-snake-game/index.html)（JS Snake Game） — `js-snake-game` - [js制作黑白棋小游戏](js-turn-game/index.html)（JS Turn Game） — `js-turn-game` - [跳跃的小球动画](jump-ball/index.html)（Jump Ball） — `jump-ball` - [60秒小游戏](man-for-60sec/index.html)（Man for 60s） — `man-for-60sec` - [JS制作翻牌配对小游戏](pair-card-game/index.html)（Pair Card Game） — `pair-card-game` - [射击小游戏](shoot-game/index.html)（Shoot Game） — `shoot-game` - [自制射击游戏的第一部分，控制飞船的移动和旋转](shooting-game/part1/index.html)（Shooting Game · Part 1） — `shooting-game/part1` - [射击及边界穿越功能](shooting-game/part2/index.html)（Shooting Game · Part 2） — `shooting-game/part2` - [素材切片及绘制方法](shooting-game/part3/index.html)（Shooting Game · Part 3） — `shooting-game/part3` - [射击游戏part4,添加闪烁星空背景及击中石头的溅射粒子效果](shooting-game/part4/index.html)（Shooting Game · Part 4） — `shooting-game/part4` - [part5:添加陨石耐久度显示以及与飞船之间的碰撞判断](shooting-game/part5/index.html)（Shooting Game · Part 5） — `shooting-game/part5` - [增加了剩余的飞船数量显示，更新了陨石刷新位置逻辑以及开始结束控制](shooting-game/part6/index.html)（Shooting Game · Part 6） — `shooting-game/part6` - [增加计分及难度提升机制以及武器增强机制](shooting-game/part7/index.html)（Shooting Game · Part 7） — `shooting-game/part7` ### 图表与可视化 (10) - [带有前后端程序的系统监控示例](cpu-monitor/index.html)（Cpu Monitor） — `cpu-monitor` - [自定义数值的仪表盘样式](dashboard/index.html)（Dashboard） — `dashboard` - [利用同步的动画制作改变文字的扫描线效果](line-change/index.html)（Line Change） — `line-change` - [原生JS绘制折线图](line-chart/index.html)（Line Chart） — `line-chart` - [雷达扫描动画效果](radar-animation/index.html)（Radar Animation） — `radar-animation` - [原生JS制作雷达图](radar-chart/index.html)（Radar Chart） — `radar-chart` - [仿chart.js的动态雷达图](radar-chart-plus/index.html)（Radar Chart Plus） — `radar-chart-plus` - [利用canvas绘制简单的扇形图](sector-data/index.html)（Sector Data） — `sector-data` - [当前进度显示条](step-line/index.html)（Step Line） — `step-line` - [利用js 处理xml文件并将数据做可视化处理](xml-visualization/index.html)（Xml Visualization） — `xml-visualization` ### UI 组件 (46) - [异形边框动态效果](3borders/index.html)（3 Borders） — `3borders` - [纯CSS实现的折叠菜单效果](Accordion-menu/index.html)（Accordion Menu） — `Accordion-menu` - [动态卡片内容切换效果](ani-card/index.html)（Animated Card） — `ani-card` - [纯CSS实现的二级菜单效果](bank-menu/index.html)（Bank Menu） — `bank-menu` - [改变背景文字的按钮](button-background-text/index.html)（Button Background Text） — `button-background-text` - [附带角框的动态按钮特效](coner-link/index.html)（Corner Link） — `coner-link` - [对角边框登录样式](corner-border-login/index.html)（Corner Border Login） — `corner-border-login` - [利用伪类遮盖的方式制作边框特效](cross-border/index.html)（Cross Border） — `cross-border` - [下落的卡牌动画](falling-card/index.html)（Falling Card） — `falling-card` - [跟随鼠标的滑动背景块菜单效果的html及css源码](float-back-bar/index.html)（Float Back Bar） — `float-back-bar` - [隐藏式图标效果](hidden-button/index.html)（Hidden Button） — `hidden-button` - [CSS实现隐藏式菜单](hidden-menu/index.html)（Hidden Menu） — `hidden-menu` - [CSS制作开关式隐藏菜单](hide-menu/index.html)（Hide Menu） — `hide-menu` - [点亮图标的开关效果](icon-switch/index.html)（Icon Switch） — `icon-switch` - [自定义的浮动提示框](icon-tips/index.html)（Icon Tips） — `icon-tips` - [CSS制作充电动画](incharge/index.html)（In Charge 充电） — `incharge` - [动态效果的角色卡片](info-card/index.html)（Info Card） — `info-card` - [变化输入框样式的特效](input-ani/index.html)（Input Animated） — `input-ani` - [使用JS创建复杂的hover动态](js-button-hover/index.html)（JS Button Hover） — `js-button-hover` - [range类型的输入框美化及应用实例](js-range-css/index.html)（JS Range CSS） — `js-range-css` - [CSS制作文件叠放特效](layer-docs/index.html)（Layer Docs） — `layer-docs` - [CSS制作的仿宜家半透明会员卡效果](LKEA-card/index.html)（LKEA Card） — `LKEA-card` - [马赛克背景切换](masaic-button/index.html)（Mosaic Button） — `masaic-button` - [仿镜面反射的登录框](mirror-login/index.html)（Mirror Login） — `mirror-login` - [可切换显示状态的图标](neon-switch/index.html)（Neon Switch） — `neon-switch` - [新拟物风格的开关](neumorphism-switch/index.html)（Neumorphism Switch） — `neumorphism-switch` - [几种替代默认超级链接的美化方式](new-link/index.html)（New Link） — `new-link` - [另一种方式实现动态的替代placeholder提示效果](new-placeholder/index.html)（New Placeholder） — `new-placeholder` - [自适应尺寸的页角装饰条](nice-corner/index.html)（Nice Corner） — `nice-corner` - [改变默认复选框样式的简单实例](on-off-switch/index.html)（On Off Switch） — `on-off-switch` - [分项验证密码强度](pass-check/index.html)（Pass Check） — `pass-check` - [密码验证实例](password-check/index.html)（Password Check） — `password-check` - [漂浮的碎片悬浮效果](piece-hover/index.html)（Piece Hover） — `piece-hover` - [动感输入框](power-input/index.html)（Power Input） — `power-input` - [利用鼠标滚轮控制的环形菜单](ring-menu/index.html)（Ring Menu） — `ring-menu` - [利用CSS变更默认的input选择框样式](roll-input/index.html)（Roll Input） — `roll-input` - [动态展开的共享按钮组](share-icons/index.html)（Share Icons） — `share-icons` - [流动的按钮边框](solid-border/index.html)（Solid Border） — `solid-border` - [动态射灯效果按钮样式](spotlight-button/index.html)（Spotlight Button） — `spotlight-button` - [提交按钮的动画效果](submit-ani/index.html)（Submit Animated） — `submit-ani` - [利用CSS切换页面主题](switch-theme/index.html)（Switch Theme） — `switch-theme` - [通过输入正确密码的解锁动画](unlock-ani/index.html)（Unlock Animated） — `unlock-ani` - [视觉错位边框效果](unreal-border/index.html)（Unreal Border） — `unreal-border` - [通过判断点击位置实现打分功能](vote-stars/index.html)（Vote Stars） — `vote-stars` - [互动登录表单，会盯人的摄像头](watching/index.html)（Watching） — `watching` - [xbox 360灯效，修改style.css注释可改为三红效果..](xbox-light/index.html)（Xbox Light） — `xbox-light` ### 图片与像素 (10) - [制作单色点阵图片](bw-images/index.html)（Bw Images） — `bw-images` - [卷动背景图片特效](float-pic/index.html)（Float Pic） — `float-pic` - [横移切换图片颜色](image-hover/index.html)（Image Hover） — `image-hover` - [使用JS制作可控的图片轮播框](img-slider/index.html)（Image Slider） — `img-slider` - [图片转字符画](img2text/index.html)（Image → Text 图片转字符） — `img2text` - [动态像素拼成图片效果](js-img-pix/index.html)（JS Image Pixel 图片像素化） — `js-img-pix` - [使用JS制作马赛克图片](mosaic-img/index.html)（Mosaic Image） — `mosaic-img` - [滑动图片动画](move-images/index.html)（Move Images） — `move-images` - [拼图式画布图片处理](puzzle-mask/index.html)（Puzzle Mask） — `puzzle-mask` - [带缩略图的幻灯片](thumbnail-slide/index.html)（Thumbnail Slide） — `thumbnail-slide` ### 工具与综合 (17) - [制作一个动态logo的实例](ani-logo/index.html)（Animated Logo） — `ani-logo` - [冒泡排序法视频可视化](bubblesort/index.html)（Bubblesort） — `bubblesort` - [中午吃什么](eat-what/index.html)（Eat What 今天吃什么） — `eat-what` - [canvas万花板动画，解压~](flower-board/index.html)（Flower Board） — `flower-board` - [老友记主题logo](friends-logo/index.html)（Friends Logo） — `friends-logo` - [新年快乐！](happy-new-year/index.html)（Happy New Year） — `happy-new-year` - [JS 记事本](js-notebook/index.html)（JS Notebook） — `js-notebook` - [随机生成颜色并通过点击复制颜色的16进制值](js-random-color-picker/index.html)（JS Random Color Picker） — `js-random-color-picker` - [前端随机抽奖小程序](lottery/index.html)（Lottery） — `lottery` - [含nes.css及像素字体的打包源代码](nes.css.part1/index.html)（NES.css 像素风 Part 1） — `nes.css.part1` - [nes.css使用说明第二部分](nes.css.part2/index.html)（NES.css 像素风 Part 2） — `nes.css.part2` - [nes.css使用说明第三部分](nes.css.part3/index.html)（NES.css 像素风 Part 3） — `nes.css.part3` - [简易涂鸦板](painter-board/index.html)（Painter Board） — `painter-board` - [纪念Pi Day的小例子](Pi-Day/index.html)（Pi Day） — `Pi-Day` - [简单代码的艺术图案](simple-art/index.html)（Simple Art） — `simple-art` - [利用vue制作滑动图片](slide-with-vue/index.html)（Slide With Vue） — `slide-with-vue` - [动态摸鱼网页，模拟windows update界面 all.html为单文件集成](windows-update/index.html)（Windows Update） — `windows-update` --- ## 目录约定 - 每个演示一个目录，入口统一为 `index.html` - 目录名统一使用小写英文 + 连字符（`particle-clock`），不含空格，便于直接作为 URL 路径使用 - `shooting-game/part1~7` 与 `liquid-ani/sampls/*` 为系列演示，保留嵌套结构 ## 其他 - `count.py` — B 站播放量/粉丝数统计小工具 - `mouse210618.js` — 可复用的鼠标粒子脚本（无 HTML 外壳，需自行引入页面） ## 发布平台 - Bilibili： ## 素材来源 - 图片： - 音效： - 图标： · 国内 CDN ## 授权 CC0 1.0 Universal（见 [LICENSE](LICENSE)）