前端嘛 Logo
前端嘛
像素风解谜小游戏
Copycat 是一款基于 HTML5 Canvas 的像素风解谜小游戏,采用 16×16 瓦片地图与自定义游戏引擎实现。游戏支持键盘与移动端触控操作,包含多关卡地图、方向箭头、冰面、机关与出口设计,强调路径规划与操作策略,适合网页端与移动端直接游玩。
像素风解谜小游戏
害羞鸡
基于 Three.js 和 GSAP 实现的 3D 互动小鸟动画示例,支持鼠标与触控操作,模拟小鸟注视、回避与害羞行为,展示实时光影、模型变形与动画交互效果,适用于 WebGL 学习、前端动画演示与创意网页展示。
害羞鸡
一只狐狸🦊
一个基于纯 HTML + CSS 实现的白天与黑夜切换动画组件,通过开关按钮实现日夜场景过渡效果,包含太阳、月亮与卡通狐狸动画,无需 JavaScript,适用于前端特效展示与交互动画学习。
一只狐狸🦊
我愿称之为天才般的创意:纯文本实现水波纹效果
一个基于 JavaScript 与 CSS 实现的 ASCII 字符波纹悬停特效页面,鼠标经过链接文字时触发动态字符扰动动画,适用于创意网页、互动列表、前端视觉效果展示与实验性 UI 设计示例。
我愿称之为天才般的创意:纯文本实现水波纹效果
404错误脸
404 错误页面动画示例,使用纯 HTML + CSS + SVG 实现。页面展示一个由“404”数字组成的动态人脸效果,包含眨眼、视线移动和表情动画,支持深色与浅色模式切换,适合用于网站 404 页面设计参考与前端动画学习。
404错误脸
擦玻璃
这是一个基于 HTML、CSS 和 SVG Filter 的交互式视觉效果示例,通过位移映射、模糊、噪声和颜色量化实现冰霜/寒冷风格的图像悬停效果,展示了纯前端实现的高级滤镜动画与创意 UI 设计,适合前端视觉效果与创意编程展示。
擦玻璃
猫选择器🐈
一个基于 HTML、CSS 和 SVG 实现的互动式可爱猫咪选择器组件,支持自定义下拉选项、鼠标悬停交互动画和趣味视觉反馈,适合用于前端 Demo、创意 UI 设计与 Web 交互效果展示。
猫选择器🐈
每一个时代,都会被一种“奇迹材料”所塑造
每一个时代,都会被一种“奇迹材料”所塑造。钢铁锻造了镀金时代。半导体点亮了数字时代。而现在,AI 以“无限心智”的形态降临。如果历史教会了我们什么,那就是:掌握这种材料的人,定义了时代。
每一个时代,都会被一种“奇迹材料”所塑造
AI正在接管 JavaScript 生态?2025年爆火项目榜单新鲜出炉
每年一度的 Rising Stars 榜单,都会基于 GitHub Star 增长情况,盘点 JavaScript 生态中最受开发者关注的项目。 2025 年的榜单已经出炉,从前端、全栈、工具到 AI、移动端,一个趋势非常明显: AI 正
欢迎来到哈比村
使用 GSAP ScrollTrigger 实现的沉浸式首屏动画示例,通过滚动触发图片放大、背景虚化消散与标题渐显效果,打造电影级 Hobbiton 视觉体验,适用于高端品牌官网与创意展示页面。
欢迎来到哈比村
一个鼠标悬停3D效果
展示一个 头像悬停缩放动画效果 示例页面,使用 纯 CSS 实现 radial-gradient 与 outline 动态缩放,适合前端视觉交互和 UI 动画演示。
一个鼠标悬停3D效果
这张牌里有个洞
这是一个展示 CSS :hover 视差效果(Parallax)卡片动画 的示例页面,结合 GSAP、Draggable 与 Tweakpane 实现鼠标与设备方向控制的 3D 卡片旋转、环形动态与实时调试面板,适合前端动画学习与视觉交互演示。
这张牌里有个洞
TypeScript:我不玩 JS 了,我改用 Go 了(性能提升 10×)
最近 TypeScript 团队发布了最新进展——TypeScript 7 的原生版本(native compiler)已经进入可实战阶段! 这是一次真正意义上的“大进化”。不是简单的语法小更新,而是 架构级重写。 一句话总结: TypeS
TypeScript:我不玩 JS 了,我改用 Go 了(性能提升 10×)
⚠️一次凌晨的主机安全警报:从挖矿木马到 Next.js 漏洞
今天清晨刚睁眼,就被腾讯云的一条「恶意文件通知」吓醒。 这意味着什么? 简单讲:有人可能正在利用你的服务器挖矿、控制、甚至准备进一步攻击。 作为开发者/维护者,这是最不想看到的事情之一。 🧨 1. 事件回顾:凌晨 5:45 的安全告警 告
黑白棋
在线玩黑白棋(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 学习示例。
起飞咯