平滑滚动效果
HTML+CSS+Lenis 实现三明治店菜单展示布局效果这是一款基于 HTML+CSS+JavaScript 结合 Lenis 平滑滚动库实现的三明治店菜单效果,拥有丝滑的页面滚动体验与灵动的波浪动画,同时设计了打印友好的 A4 标准布局,点击打印按...
噪点解码动画
Canvas 实现 Strings Terminal 字符串终端物理交互效果这是一款基于 Canvas + 原生 JavaScript 技术实现的字符串终端物理交互效果,初始状态显示灰色 ASCII 噪点网格,点击拖动线条会触发物理回弹动画,将噪点解码为发光琥珀色文字信...
红色丝绒背景
原生 JS 实现红色丝绒质感流动线帘(窗帘)背景效果这是一款基于原生 JavaScript 技术实现的红色丝绒质感流动线帘背景效果,通过 Verlet 物理引擎模拟数千根垂直线条的自然摆动,呈现出逼真的丝绒褶皱与光影流动感,视觉高级且富有层次感,...
拟物化控制面板
HTML拟物化太空飞船导航控制面板效果(CSS+JS)这是一款纯 HTML+CSS+JS 技术实现的拟物化深空导航控制面板效果,精准还原拉丝金属质感、铆钉舷窗、模拟速度表、带 CRT 扫描线的 LCD 显示屏、弹簧式拨动开关等经典拟物化元素,支持拖...
图片画廊
React 实现高级感十足的 Morph 变形过渡图片轮播图画廊效果这是一款基于 React 技术实现的 Morph 变形过渡图片画廊效果,支持左右箭头切换与底部缩略图快速导航,图片切换时带有流畅自然的锐化轮廓变形过渡动画,视觉体验高级细腻,适用于个人摄影作品集...
世界杯会徽 CSS 动画
纯 CSS 实现 2026 世界杯会徽+动态彩色波纹背景展示效果这是一款纯 CSS 技术实现的 2026 世界杯官方会徽动态展示效果,精准还原会徽标志性上下对称镜像结构的同时,搭配流畅的彩色几何背景流动动画,视觉冲击力强,适用于体育赛事专题页、球迷社区、世界...
多变液态气泡
WebGL 3D 液态玻璃超大泡泡交互变形效果,点击变换多种形态附着与页面!这是一款 3D 液态玻璃交互效果,基于 WebGL 技术(VFX-JS)实现,精准还原玻璃的透明质感、彩虹色散与高光反射效果,点击泡泡可触发自然流畅的 3D 液态变形动画,视觉表现力极强。适用于...
地形生成器
Canvas 等距地形生成器,程序化 3D 岛屿地形生成效果这是一款基于 Canvas 技术实现的等距视角程序化地形生成效果,可自动生成包含山丘、湖泊、沙滩与植被的多样化 3D 岛屿地貌,采用经典斜 45 度等距视角呈现,层次清晰立体感强,支持一键随机生...
一维时钟
极简一维垂直时钟效果(CSS+JS),创意空间化时间显示设计!这是一款极简一维垂直时钟效果,基于 CSS+JavaScript 技术实现,采用单轴垂直线性布局,小时通过高亮刻度标识,3、6、9、12 点刻度加粗形成自然视觉锚点,分钟以垂直进度条直观展示,每...
GSAP 悬停交互
GSAP 实现的图片卡片随鼠标移动产生位移,创意网页展示必备这是一款横向滚动卡片悬停交互效果,基于 GSAP.js 动画库实现,鼠标悬停卡片时卡片滚动位移丝滑无卡顿,并且标题自动高亮变色,交互反馈清晰直观,适用于个人作品集、摄影画廊、品牌官网等需要横向内...
GSAP光波切换
鼠标跟随画廊效果 GSAP 光波切换自动轮播组件这是一款鼠标跟随式画廊效果,基于 GSAP 技术实现,圆形光标会跟随鼠标移动,点击切换图片时呈现自然的扩散光波过渡,闲置状态下自动轮播,交互流畅且富有氛围感,适用于摄影作品集、风景展示页、艺术画...
金融卡动画
SVG 借记卡动态效果 GSAP 路径动画实现这是一款 SVG 借记卡动态效果,基于 GSAP+MotionPathPlugin 技术实现,卡片上的几何元素会沿预设路径流畅运动,呈现出简约现代的视觉质感,适用于金融产品展示、支付界面动效、数...