前端嘛 Logo
前端嘛
黑白棋
在线玩黑白棋(Othello/Reversi),支持单人对战电脑,实时显示黑白棋分数,智能 AI 自动走棋,提供可视化棋盘与交互操作,简单易玩,适合策略游戏爱好者。
黑白棋
CSS实现3D国际象棋模型
这是一款基于纯 CSS 实现的 3D 立体国际象棋棋盘示例,支持动态旋转展示,拥有完整棋子造型与棋盘阴影效果,无需 JavaScript,即可呈现沉浸式 3D 可视化效果,适合前端学习与视觉演示。
CSS实现3D国际象棋模型
赛博拼豆
赛博拼豆:在线像素画制作工具,支持画笔、滴管、橡皮擦、颜色选择和画布尺寸调整,提供皮卡丘与精灵球示例,轻松创作像素艺术作品。
赛博拼豆
duang~~~
一个基于 Three.js 的互动粒子场特效,呈现梦幻般的光晕与粒子波纹效果。支持鼠标交互与动态绽放动画,适合网页背景、视觉展示或创意互动项目。
duang~~~
源码学习——手写 zustand
《手写 Zustand》完整教程,带你从零实现一个简易状态管理库,讲解核心原理、闭包状态存储、发布订阅模式,以及 React 中的 useSyncExternalStore 用法,帮你深入理解 Zustand 工作机制。
源码学习——手写 zustand
“秘密”涂鸦板
使用 WebGPU 实现的流体动态特效演示页面,展示高性能实时流体模拟与光影交互效果,支持明暗主题切换,适合 WebGL 与 WebGPU 技术学习和前端可视化展示。
“秘密”涂鸦板
响应式网格布局
响应式网格图片布局示例,展示多张高清图片,通过CSS Grid实现自动适配不同屏幕尺寸的瀑布流式排版,适合前端开发学习与网页设计参考。
响应式网格布局
消消乐
一款3D立体几何消除游戏,玩家可旋转棋盘、连接相邻图形进行消除,通过策略获得高分。
消消乐
用代码画一个佐助
这是一幅使用纯CSS绘制的《火影忍者》角色宇智波佐助像素画,采用HTML5与CSS3实现,无需图片,通过伪元素与box-shadow属性精准还原角色外观,展示前端像素艺术创作与CSS像素绘图技巧。
用代码画一个佐助
起飞咯
这是一个基于 Three.js 的低多边形 3D 世界实验,展示动态场景渲染、光照、阴影、天空与地形效果,用户可以通过鼠标控制飞机移动。项目包含旋转的森林、飞行的飞机、太阳和天空等元素,适合作为 WebGL 可视化、3D 前端交互和 Three.js 学习示例。
起飞咯
弓箭射靶小游戏
一个基于 HTML5 SVG、GSAP 动画和 JavaScript 实现的弓箭射击靶心小游戏,支持鼠标与触摸操作,真实弓弦拉伸与箭矢飞行动画,命中靶心时触发动态提示效果,适合前端动画与交互练习。
弓箭射靶小游戏
好酷炫的 3D 小蜜蜂
一个使用Three.js、GLTFLoader和GSAP实现的网页3D动画小蜜蜂展示,支持滚动交互、模型动画播放与响应式布局,结合现代CSS与WebGL技术打造沉浸式视觉体验。
好酷炫的 3D 小蜜蜂
模拟数字时钟
一个基于HTML、CSS和jQuery实现的模拟时钟与数字时钟结合的动态效果展示,支持实时显示时间、日期和星期,适合前端学习与交互动效项目。
模拟数字时钟
煎鸡蛋 Switch
一个使用 HTML、CSS 变量、伪元素、CSS 动画 和 JavaScript 实现的煎鸡蛋风格开关按钮示例,展示前端交互与视觉设计的创意实现。
煎鸡蛋 Switch
两只蜡烛的创意 Loading
一个使用纯 CSS 实现的趣味蜡烛动画示例,包含背景切换、火焰跳动、眼睛眨动、烟雾飘散等效果,展示 CSS3 动画、transform、keyframes 的创意用法,适合前端开发者学习纯 CSS 动画技巧。
两只蜡烛的创意 Loading
喷火龙
这是一个基于 Three.js 和 GSAP 动画的 3D 交互式小龙展示,用户可以通过点击和拖拽控制小龙打喷嚏,伴随火焰和烟雾特效,呈现逼真的 WebGL 动画体验。
喷火龙
一个抽象搞怪的 404 页面
一个简洁美观的自定义404错误页面模板,使用Bootstrap 3和Google Fonts Arvo字体设计,支持响应式布局和CSS动画背景,适合网站错误页面优化与用户体验提升。
一个抽象搞怪的 404 页面
让小熊吃到星星
《让小熊吃到星星》是一款基于 HTML5 Canvas 的益智小游戏,玩家通过拖动和旋转网格,引导小熊抵达星星位置。游戏使用原生 JavaScript、CSS3 动画和交互事件处理,支持多关卡选择和物理旋转效果,提供流畅的网页端游戏体验。
让小熊吃到星星
脉冲星崩解
一个基于 Three.js WebGL 粒子特效 的互动演示,展示“脉冲星崩解”视觉效果。支持主题切换(熔岩、宇宙、翡翠)、粒子动画、冲击波效果和交互式控制,结合 UnrealBloomPass 后处理、OrbitControls 相机控制,实现沉浸式 3D 动态体验。
脉冲星崩解
给狮子吹吹风
这是一个基于 Three.js 和 WebGL 的 3D 狮子互动动画,用户通过鼠标拖动或触摸可以制造风,让狮子的鬃毛和表情动态变化,展示了现代前端交互动画效果。
给狮子吹吹风
可爱的柴犬
一个基于 Vue.js 的可爱柴犬互动组件示例,结合 SVG 与 CSS 动画实现角色表情、耳朵和眼睛的动态效果,支持随机化展示多种柴犬角色(Ume、Sesame、Tuna、Okaka 等)。
可爱的柴犬
狼来了
这是一款基于 Three.js 和 GSAP TweenMax 开发的 3D 网页小游戏,玩家操控兔子奔跑、跳跃并收集胡萝卜,同时躲避刺猬。游戏使用 WebGL 渲染、响应式设计,支持鼠标与触屏交互,适合展示前端动画、3D 建模与游戏开发技巧。
狼来了
经典泡泡消消乐
一款基于 HTML5 Canvas 与原生 JavaScript 开发的泡泡龙消除游戏,支持鼠标与触摸操作,采用模块化脚本(grid.js、ball.js、shooter.js、manager.js)实现动态渲染与交互,适合前端开发学习与游戏案例展示。
经典泡泡消消乐
彩虹兄弟 Loading
本页面展示了一个基于HTML5、CSS3和SVG动画实现的多彩几何角色与爆炸特效的创意互动场景,使用关键帧动画(@keyframes)、Bezier缓动函数、prefixfree库自动添加CSS前缀,营造连续运动和动态变化效果,适合动画效果示例与前端动画技术学习。
彩虹兄弟 Loading