8 位像素网球游戏
复古 8 位像素网球对战小游戏,竖版移动端 CPU 对战网页小游戏这是一款竖版移动端优先的复古 8 位像素网球游戏,基于前端网页技术实现,还原 NES 时代经典像素质感,搭配扫描线滤镜与芯片音乐音效,支持完整网球专业计分规则,提供移动端滑动、桌面端方向键双操作...
液态气泡
Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...
复古显示屏
CSS 复古 CRT 显示器故障效果,RGB 色差扫描线文字动效实现方案这是一款基于纯 CSS 实现的 CRT 老式显示器视觉效果。图中用 ASCII 字符拼出一只猫,叠加青色发光、RGB 通道错位(色差)两层处理,瞬间还原出八九十年代老显示器的那种"坏掉又没完全坏...
3D手表
纸艺剪裁风格 3D 手表动态表盘效果(GSAP+SVG)这是一款拟物化手表动画效果,基于GSAP+SVG滤镜技术实现。整体采用纸艺剪裁风格,表盘呈现出柔和的立体层次感,像是用半透明纸片层叠出来的。最巧妙的是表盘上的时间显示——利用SVG的goo滤镜(...
晶莹质感按钮
纯 CSS 打造的现代化毛玻璃+流光边框+悬停高亮交互按钮这是一款基于 纯 CSS 技术实现的毛玻璃风格(Glassmorphism)按钮。它巧妙利用了浏览器的底层滤镜属性,将背景的色彩与按钮表面的半透明磨砂感融为一体,边框有微光略过,悬停高亮动效,是...
光影对话框
纯 CSS 打造的 Gemini 沉浸式智能输入框(带彩色流光边框)这是一款极具未来感的 “Ask Gemini” 风格输入框,完全基于 纯 CSS 技术实现。它良好复刻了现代 AI 交互界面的核心视觉特征:一个简洁的药丸型容器,配以灵动的多色渐变流动霓虹光晕。...
数字温床
静态图+火焰:CSS实现的壁橱里火焰燃烧,周围微微火光映照的治愈感氛围效果这是一款极具治愈感的氛围渲染设计,基于 CSS 动画与光影滤镜技术以及少量JS代码实现。它最动人的地方在于对“静止影像”的数字化生命赋予:原本只是一张冬日午后猫咪在壁炉旁小憩的静态照片,但通过代...
数字重力
纯 CSS 打造的 3D 悬浮金属发光开关按钮这是一款次世代 3D 悬浮感应开关按钮,基于 纯 CSS(3D 透视变换 + 多重发光渐变) 技术实现。它彻底打破了扁平化 UI 的平面次元,通过 500px 的视距设定与 6 层模拟光子发光的...
弹球对战
赛博霓虹对决:基于 Canvas 打造的复古 CRT 风格弹球 HTML 小游戏源码这是一款赛博复古风格的霓虹弹球对战游戏,基于 Canvas 2D 技术构建。它不仅复刻了经典的乒乓对决,更通过扫描线、RGB 色散以及粒子拖尾等视觉滤镜,在网页上良好模拟了 80 年代 CRT ...
图腾文案
幻彩 2026:基于 SVG 滤镜的液态流动视觉形变设计这是一款液态流体形变(Liquid Morphing)动画,基于 SVG Filters + Canvas + three.js 技术实现。它通过数字形状的有机扭曲与色彩流动,将静态的“2026...
模糊填充
比例救星:纯 CSS 实现的图片智能模糊填充扩展这是一款智能图片比例适配效果,基于 CSS Object-fit + Mask + Backdrop-filter 技术实现。它能自动将非正方形的图片填充为 1:1 正方形,并利用图片自身内容生...
毛玻璃下拉框
流光溢彩:基于 HTML5 新特性+CSS滤镜自定义的“液态磨砂质感玻璃”下拉菜单组件这是一款毛玻璃液态风格下拉菜单,基于 HTML appearance: base-select + CSS 滤镜技术实现。它将传统的、枯燥的系统下拉框经过定制转化为了极具未来感的“液态玻璃”视觉...