获取同款背景源码
纯 CSS 橙子插画特效｜果皮纹理与滴汁弹跳Loading加载动画源码

橘子Loading

纯 CSS 橙子插画特效｜果皮纹理与滴汁弹跳Loading加载动画源码

不用一张图片画出的三只橙子：果皮麻点、切面囊瓣、蒂梗和地面投影全由渐变叠出，配弹跳、叹气与滴汁三段循环动画。

玻璃气泡跑马字特效｜SVG 液态折射首屏视差源码

SVG玻璃质感滤镜

玻璃气泡跑马字特效｜SVG 液态折射首屏视差源码

三只玻璃气泡悬在首屏右侧，文字沿气泡外缘环形滚动，泡内折射着风景，鼠标一动三只泡按不同倍率错开浮动。

局部保留色彩特效｜SVG 滤镜实现的选择性去色图片对比源码

SVG前后对比

局部保留色彩特效｜SVG 滤镜实现的选择性去色图片对比源码

拖动分割线，右半边只留下指定色相、其余全部转黑白；再拉一根滑杆就能实时旋转被保留的颜色，纯 SVG 滤镜，不用 Canvas。

胶片卷首屏 GSAP 滚动特效｜视频框旋转放大铺满全屏的落地页源码

电影感首屏

胶片卷首屏 GSAP 滚动特效｜视频框旋转放大铺满全屏的落地页源码

向下滚动，中央的小方块视频一边转圈一边放大，标题被逐字撕碎吹散，最后铺满整屏并揭出内容浮层，配惯性平滑滚动。

滚动绘制路线地图 GSAP 特效｜左右分屏可全屏展开的活动页 HTML 源码

SVG路径动画

滚动绘制路线地图 GSAP 特效｜左右分屏可全屏展开的活动页 HTML 源码

左图右文的活动页：向下滚动时地图上的路线一段段画出来，镜头始终跟住笔尖平移，中途还会推近再拉远，可一键展开全屏。

纯 CSS 水面涟漪特效｜同心圆环扩散的写实波纹源码

水波涟漪动画

纯 CSS 水面涟漪特效｜同心圆环扩散的写实波纹源码

一百圈同心椭圆共用同一条摆动动画，仅靠逐圈递增的负延迟就形成向外扩散的水波，圈数与速度可实时切换，纯HTML+CSS实现，零 JavaScript。

马克杯商城页面 HTML 模板｜暗夜星空背景的电商列表布局源码

马克杯电商模板

马克杯商城页面 HTML 模板｜暗夜星空背景的电商列表布局源码

深色商品列表页：星空随鼠标视差偏移并缓慢自转，卡片悬停浮起滑出加购条，带颜色/款式选项、明暗主题切换与购物车计数。

六边形蜂巢图片墙特效｜纯 CSS 交错咬合画廊源码

蜂巢图片墙

六边形蜂巢图片墙特效｜纯 CSS 交错咬合画廊源码

十四张六边形照片严丝合缝地咬在一起，悬停时整块抬起、去掉灰度、图片放大，标题从下方滑入，全程零 JavaScript。

滚动展开图片遮罩特效｜GSAP 裁剪框铺满全屏动画源码

图片渐显

滚动展开图片遮罩特效｜GSAP 裁剪框铺满全屏动画源码

滚到这一屏页面自动钉住，居中的圆角小窗沿四周展开直到铺满整屏，标题与副标题随后错开淡入上移，进度完全跟着滚轮走。

音频故障均衡器特效｜随音乐撕裂画面的 Canvas 视觉源码

音频可视化

音频故障均衡器特效｜随音乐撕裂画面的 Canvas 视觉源码

播放音乐，画面就跟着节拍碎掉：RGB 三通道错位、方块被随机搬走、扫描线横向抖动，撕裂强度由实时频谱能量决定。

360 度转盘导航特效｜圆形菜单旋转选中的 CSS 交互源码

圆形转盘导航

360 度转盘导航特效｜圆形菜单旋转选中的 CSS 交互源码

八个入口沿圆周排布，点哪一项整圈就转到顶部指针下；按钮自身反向旋转始终保持水平，跨过起点也永远走最短的一边。

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

相册组件

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

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