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

橘子Loading

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

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

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

电影感首屏

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

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

杯子注水波浪动画(纯CSS水位上升特效)

CSS注水动画

杯子注水波浪动画(纯CSS水位上升特效)

这是一款杯子注水的波浪动画,基于纯 CSS 实现。画面中央是一只带白色描边和把手的杯子,杯内水面呈波浪起伏,随着动画循环缓缓上升又回落,模拟出注水与晃动的自然感;杯身圆角、投影与高光共同营造出立...

12款科技风加载动画合集(CSS+JS Loading特效)

科技风加载动画

12款科技风加载动画合集(CSS+JS Loading特效)

这是一套极客终端风格的加载动画合集,共 12 款,基于 CSS 动画与原生 JavaScript 实现。灵感取自系统界面、命令行与仪器面板:扫描线、二进制数据流、像素格逐格填充、音频波形、打字机...

CSS 渐变流光进度按钮 — 底部光晕描边,悬停自动涨进度

进度环按钮

CSS 渐变流光进度按钮 — 底部光晕描边,悬停自动涨进度

这是一款渐变描边引导按钮效果,纯 CSS 实现,没有用任何 JS 动画。按钮左侧是一圈虚线进度环,中间显示完成百分比,右侧是标题、副标题和箭头,底部还透出一层柔和的彩色光晕,像是从下方打上来的灯光。

发送按钮液体熔融动画过渡效果(CSS+JS+SVG)

发送按钮动画

发送按钮液体熔融动画过渡效果(CSS+JS+SVG)

这是一款带有 Goo 液态熔融效果的发送按钮交互动效,基于 CSS+JavaScript+SVG 技术实现,点击纸飞机发送按钮触发丝滑的粘连形变过渡动画,自然完成从发送状态到成功状态的切换,动画...

GSAP+SVG 实现丝滑异步加载器,电商下单与删除按钮状态动画

GSAP 异步加载动画

GSAP+SVG 实现丝滑异步加载器,电商下单与删除按钮状态动画

这是一款基于 HTML+CSS+JavaScript+GSAP+SVG 技术实现的高品质异步加载器效果,专为电商按钮交互设计,提供购买成功和删除失败两套完整的状态动画流程。无论异步操作时长如何变...

纯 CSS 自动对比度 Loading 加载进度条动效

加载条

纯 CSS 自动对比度 Loading 加载进度条动效

这是一款基于纯 CSS 实现的自动对比度加载进度条效果。进度填充与文字显示同步联动,通过自动对比度适配让加载状态视觉清晰、层级分明,极简风格适配性强,适用于网页加载、数据提交、资源缓冲等各类等待...

SVG+GSAP 点阵缩放过渡(Loading)动画,圆点阵列空间动效

点阵过渡

SVG+GSAP 点阵缩放过渡(Loading)动画,圆点阵列空间动效

这是一款点阵阵列丝滑缩放过渡动画效果,基于 SVG+GSAP 技术实现,通过圆点尺寸与阵列疏密的同步渐变,打造出带空间纵深感的 3D 流畅缩放动效,可适配多方向过渡需求,适用于品牌官网动效、页面...

24种CSS+SVG加载动画合集,开箱即用的Loading效果库

加载库

24种CSS+SVG加载动画合集,开箱即用的Loading效果库

这是一款加载动画集合效果,基于 CSS Keyframes + SVG + 少量原生 JS 技术实现,内置 24 种风格各异的 Loading 样式——涵盖旋转圆环、弹跳圆点、进度条、波纹、沙漏...

两个发光球体运动加载动画 | 高质感CSS Loader特效组件

发光球加载器

两个发光球体运动加载动画 | 高质感CSS Loader特效组件

这是一款光球残影小球旋转加载动画效果,基于 CSS 技术实现。两个发光圆球在黑色背景上围绕圆圈互相追逐游走,运动过程中拖出一串半透明残影,模拟出真实的物理运动感,就像长曝光拍到的光源轨迹。三种配...

纯 CSS 实现的创意色彩混合动态加载Loading动画

混合色块加载器

纯 CSS 实现的创意色彩混合动态加载Loading动画

这是一款基于 CSS color-mix() 函数实现的加载动画效果。几个半透明圆角色块在一个倾斜的容器内持续位移,重叠区域的颜色会随着色块运动实时混合计算,每一帧的交叠色都是真实的颜色混合结果...