全屏放大图片画廊|缩略图队列切换的相册特效 HTML 源码

相册组件

全屏放大图片画廊|缩略图队列切换的相册特效 HTML 源码

点底部任意缩略图,它就一路放大铺满整屏,原来的大图缩回队列末尾,左侧标题与描述随之淡入上移。切换全程一个 transform 完成。

纯 CSS 蚂蚁线虚线边框特效|可参数化流动描边源码

流动蚂蚁线

纯 CSS 蚂蚁线虚线边框特效|可参数化流动描边源码

不用图片不用脚本的流动虚线边框:两个伪元素反向跑动,颜色、速度、方向、粗细、线段长短全用变量控制,附十种预设可直接抄。

侦探证据板资讯墙特效|卡片可拖拽红线连线的看板 HTML 源码

信息看板

侦探证据板资讯墙特效|卡片可拖拽红线连线的看板 HTML 源码

软木板质感的证据墙:卡片带图钉与随机倾角,可随手拖到任意位置,一键拉红线串起同类线索,点标题弹出档案详情,还能排序、筛选、归档。

纯 CSS 封面流图片轮播|零 JS 3D 立体滑动画廊源码

滚动驱动轮播组件

纯 CSS 封面流图片轮播|零 JS 3D 立体滑动画廊源码

零 JavaScript 的封面流轮播:图片按与中心的距离自动倾斜、缩放、堆叠,左右按钮与圆点全由原生 CSS 伪元素生成,增删图片不改样式。

Three.js 实现的 3D 办公室退信动画|打字发信失败揉纸投篮互动 HTML 特效源码

3D办公场景

Three.js 实现的 3D 办公室退信动画|打字发信失败揉纸投篮互动 HTML 特效源码

低多边形办公室里,屏幕自动逐字写邮件、发送失败,打印机吐出退信通知;点一下纸就揉成团,甩鼠标投向垃圾桶还会计分。

3D 邮箱投信 Three.js 动画特效|信封跟随鼠标的交互场景源码

3D信箱

3D 邮箱投信 Three.js 动画特效|信封跟随鼠标的交互场景源码

信封跟着鼠标在空中漂,点一下邮箱就自动飞过去投进投信口,红旗弹起、箱体回弹,三秒后自动复位重来。纯代码建模,无外部模型。

弹珠机文字物理特效|键盘打字掉落碰撞钉板互动 HTML 源码

物体掉落碰撞

弹珠机文字物理特效|键盘打字掉落碰撞钉板互动 HTML 源码

打字即掉字:字母被实时转成真实多边形刚体,从钉阵间弹跳滚落,撞钉发出五声音阶铃音,三种钉阵可切换,鼠标还能抓着字母甩。

Three.js 3D 划船特效|湖面水波与人物划桨场景源码

3D划船动画

Three.js 3D 划船特效|湖面水波与人物划桨场景源码

Three.js 全代码建模的 3D 划船场景,水面顶点实时起伏,人物双桨入水带出尾迹与涟漪,可拖拽旋转、滚轮缩放,含完整源码。

React Motion垂直画廊 3D 旋转灰调轮播模板

3D垂直轮播

React Motion垂直画廊 3D 旋转灰调轮播模板

八张灰调滤镜的图片竖排轮播,上下箭头切换,非当前项 30% 透明缩放 85%、上下项分别 X 轴 +30°/-30° 倾斜。

WebGL2着色器流体六边形彩色发光 Hero 背景效果源码

流体背景动画

WebGL2着色器流体六边形彩色发光 Hero 背景效果源码

Domain warping 噪声 + 六边距离场生成流动六边彩色发光背景,鼠标位置扭曲画面,标题带 conic 渐变虹光。

纯CSS文字贴纸描边光泽悬浮变色效果模板

CSS贴纸

纯CSS文字贴纸描边光泽悬浮变色效果模板

八张彩色文字贴纸随机散落,双层描边+渐变光泽用 `paint-order` 和 filter drop-shadow 层层叠加。

CSS Scroll-Driven粘性图片区块切换动画源码下载

滚动粘性布局

CSS Scroll-Driven粘性图片区块切换动画源码下载

四段全屏内容随页面滚动叠层过渡,同一张图 clip-path 上滑淡入,`animation-timeline: view()` 纯 CSS 驱动。