前端嘛 Logo
前端嘛
猫选择器🐈
一个基于 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 学习示例。
起飞咯
弓箭射靶小游戏
一个基于 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 动画体验。
喷火龙