前端嘛 Logo
前端嘛
Next.js 16 Beta 版本预览
Next.js 16 Beta 已于 2025 年 10 月 9 日发布,带来了开发者体验、性能和架构方面的重大改进。
消消乐
消消乐
一款3D立体几何消除游戏,玩家可旋转棋盘、连接相邻图形进行消除,通过策略获得高分。
用代码画一个佐助
用代码画一个佐助
这是一幅使用纯CSS绘制的《火影忍者》角色宇智波佐助像素画,采用HTML5与CSS3实现,无需图片,通过伪元素与box-shadow属性精准还原角色外观,展示前端像素艺术创作与CSS像素绘图技巧。
React 19.2 版本解析
React 19.2 于 2025 年 10 月 1 日发布,这是继 React 19 和 React 19.1 后的第三次重要更新,重点提升了性能、开发者体验以及服务器端渲染(SSR)的能力。以下是本次版本的核心特性解析
React 基金会成立:从 Meta 到社区的关键一步
10 月 7 日,React 官方宣布成立 React 基金会(React Foundation)。 这意味着,React 将从 Meta(原 Facebook)“毕业”,进入一个由多方共同治理的新阶段。 这不仅是一项组织变动,更是 React 生态迈向真正「社区化」的重要里程碑。
起飞咯
起飞咯
这是一个基于 Three.js 的低多边形 3D 世界实验,展示动态场景渲染、光照、阴影、天空与地形效果,用户可以通过鼠标控制飞机移动。项目包含旋转的森林、飞行的飞机、太阳和天空等元素,适合作为 WebGL 可视化、3D 前端交互和 Three.js 学习示例。
弓箭射靶小游戏
弓箭射靶小游戏
一个基于 HTML5 SVG、GSAP 动画和 JavaScript 实现的弓箭射击靶心小游戏,支持鼠标与触摸操作,真实弓弦拉伸与箭矢飞行动画,命中靶心时触发动态提示效果,适合前端动画与交互练习。
好酷炫的 3D 小蜜蜂
好酷炫的 3D 小蜜蜂
一个使用Three.js、GLTFLoader和GSAP实现的网页3D动画小蜜蜂展示,支持滚动交互、模型动画播放与响应式布局,结合现代CSS与WebGL技术打造沉浸式视觉体验。
模拟数字时钟
模拟数字时钟
一个基于HTML、CSS和jQuery实现的模拟时钟与数字时钟结合的动态效果展示,支持实时显示时间、日期和星期,适合前端学习与交互动效项目。
煎鸡蛋 Switch
煎鸡蛋 Switch
一个使用 HTML、CSS 变量、伪元素、CSS 动画 和 JavaScript 实现的煎鸡蛋风格开关按钮示例,展示前端交互与视觉设计的创意实现。
两只蜡烛的创意 Loading
两只蜡烛的创意 Loading
一个使用纯 CSS 实现的趣味蜡烛动画示例,包含背景切换、火焰跳动、眼睛眨动、烟雾飘散等效果,展示 CSS3 动画、transform、keyframes 的创意用法,适合前端开发者学习纯 CSS 动画技巧。
喷火龙
喷火龙
这是一个基于 Three.js 和 GSAP 动画的 3D 交互式小龙展示,用户可以通过点击和拖拽控制小龙打喷嚏,伴随火焰和烟雾特效,呈现逼真的 WebGL 动画体验。
一个抽象搞怪的 404 页面
一个抽象搞怪的 404 页面
一个简洁美观的自定义404错误页面模板,使用Bootstrap 3和Google Fonts Arvo字体设计,支持响应式布局和CSS动画背景,适合网站错误页面优化与用户体验提升。
让小熊吃到星星
让小熊吃到星星
《让小熊吃到星星》是一款基于 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
彩虹兄弟 Loading
本页面展示了一个基于HTML5、CSS3和SVG动画实现的多彩几何角色与爆炸特效的创意互动场景,使用关键帧动画(@keyframes)、Bezier缓动函数、prefixfree库自动添加CSS前缀,营造连续运动和动态变化效果,适合动画效果示例与前端动画技术学习。
新拟态组件
新拟态组件
本页面展示了基于CSS Neumorphism新拟态设计的前端UI组件示例,包含开关、复选框、单选按钮、按钮、时钟、搜索框、分段控制、图标、滑块等交互元素,使用HTML5、CSS3、JavaScript及Ionicons、Material Icons等技术,适合UI设计参考与前端开发学习。
人浪
人浪
一个利用 CSS :has() 伪类与响应式布局实现的互动动画示例,通过鼠标悬停触发人物角色联动“人浪”效果,展示高级 CSS 选择器、Flexbox、渐变背景与过渡动画的综合运用。适合前端开发者学习 CSS 动画、交互设计及复杂选择器的使用。
粉色冰块闯关游戏
粉色冰块闯关游戏
PINK ICE 是一款基于 HTML、CSS 和 JavaScript 开发的响应式滑块解谜游戏,支持方向键或触屏操作,适配移动与桌面端,拥有多级挑战关卡与炫酷动画效果。
白昼黑夜切换器
白昼黑夜切换器
一个使用 React Context API 和 styled-components 实现的日夜模式切换动画示例,具有动态太阳、月亮和星星效果,支持白天与夜晚背景自动判断和用户切换。