弹球对战
赛博霓虹对决:基于 Canvas 打造的复古 CRT 风格弹球 HTML 小游戏源码这是一款赛博复古风格的霓虹弹球对战游戏,基于 Canvas 2D 技术构建。它不仅复刻了经典的乒乓对决,更通过扫描线、RGB 色散以及粒子拖尾等视觉滤镜,在网页上完美模拟了 80 年代 CRT ...
跑酷小游戏
基于 WebGL 打造的极简 3D 像素风躲避障碍物 HTML 跑酷小游戏这是一款轻量级的 3D 低多边形(Low-Poly)跑酷 HTML 小游戏,基于 Three.js 与 WebGL 技术构建。它不仅是一个简单的“跳一跳”程序,更像是《天天过马路》的极简网页版。...
柱状统计图
灵动瀑布流:纯 CSS 打造的极简渐变倒挂柱状图这是一款极简风格的倒挂式柱状图,基于纯 CSS 技术实现。它打破了传统图表“由下向上”生长的刻板印象,通过悬浮吊挂的视觉逻辑,配合清爽的翠绿渐变和微立体阴影,让冰冷的数据有了如同“瀑布”般的流动...
图腾文案
幻彩 2026:基于 SVG 滤镜的液态流动视觉形变设计这是一款液态流体形变(Liquid Morphing)动画,基于 SVG Filters + Canvas + three.js 技术实现。它通过数字形状的有机扭曲与色彩流动,将静态的“2026...
文字背景
纯 CSS 磨砂玻璃文字背景,让文字清晰的展示于图片之上这是一款毛玻璃质感(Glassmorphism)卡片预览效果,基于 CSS backdrop-filter 技术实现。它通过对底层图像进行实时的物理模糊计算,营造出一种如磨砂玻璃般通透、深邃的视...
手风琴轮播
手风琴式自由伸缩图文轮播展示组件(CSS+JS):打造极具“张力”的高级感产品橱窗这是一款手风琴式纵向切片交互图文轮播组件,基于 CSS Flexbox 布局与 JavaScript 逻辑实现。它打破了传统轮播图“一次只能看一个”的局限,通过横向拉伸的动态反馈,让页面在极简与...
星光粒子动画
Canvas 星光粒子圣诞树动画源码:指尖触碰下的数字节日浪漫这是一款基于 HTML5 Canvas 技术实现的粒子交互动态圣诞树。它完全不依赖于传统的图片素材,而是利用代码实时计算成千上万个光点的坐标与轨迹,在漆黑的数字空间里勾勒出一棵富有呼吸感的“星光...
全屏轮播
全屏纵向沉浸式画廊(CSS+JS):让品牌叙事更具质感的交互设计这是一款全屏极简风格的上下图文轮播组件,基于原生 CSS 布局与 JavaScript 逻辑实现。它通过大面积的纯色背景与居中构图+上下导航切换按钮,营造出一种高级的视觉呼吸感,非常适合追求格调...
模糊填充
比例救星:纯 CSS 实现的图片智能模糊填充扩展这是一款智能图片比例适配效果,基于 CSS Object-fit + Mask + Backdrop-filter 技术实现。它能自动将非正方形的图片填充为 1:1 正方形,并利用图片自身内容生...
毛玻璃下拉框
流光溢彩:基于 HTML5 新特性+CSS滤镜自定义的“液态磨砂质感玻璃”下拉菜单组件这是一款毛玻璃液态风格下拉菜单,基于 HTML appearance: base-select + CSS 滤镜技术实现。它将传统的、枯燥的系统下拉框经过定制转化为了极具未来感的“液态玻璃”视觉...
彩色板
丝滑交互:纯 CSS 实现的 Dropbox 风格动态色板这是一款交互式色彩色板展示效果,基于 纯 CSS 技术实现。它复刻了 Dropbox 经典的色块交互细节,通过平滑的悬停动效实现色卡的动态升起与聚焦,适用于设计规范(Design System)...
接球小游戏
硬核黑科技:纯 CSS 驱动物理碰撞实现乒乓球HTML小游戏这是一款纯 CSS 实现的碰撞检测物理游戏,基于 CSS Style Queries(样式查询)+ Keyframes(关键帧动画)技术实现。它将传统的 JavaScript 逻辑完全交由 CS...