Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画

液态气泡

Liquid Glass液态玻璃气泡效果,Three.js实现的Metaball折射交互动画

这是一款液态玻璃气泡效果,基于 Three.js + WebGL + Metaball 算法技术实现,模拟真实水泡的透明质感、光线折射与表面张力——气泡之间靠近时会自然"粘连融合",拖拽可实时交...

纯CSS 向内 3D 弯曲图片自动轮播组件 | 无需JS的沉浸式画廊组件

弧形轮播

纯CSS 向内 3D 弯曲图片自动轮播组件 | 无需JS的沉浸式画廊组件

这是一款纯CSS 3D环形自动轮播效果,仅用CSS实现,图片卡片沿弯曲弧形轨道排列,两侧自然透视收缩,中间聚焦突出,呈现出强烈的空间纵深感。难得的是全程不依赖JS驱动动画,代码量极少且注释详尽,...

呼吸快门,用 p5.js 模拟镜头光圈的律动感,适合于网站 Loading 动画等场景

相机光圈

呼吸快门,用 p5.js 模拟镜头光圈的律动感,适合于网站 Loading 动画等场景

这是一款「呼吸快门」动态视觉效果,基于 p5.js 技术实现。灵感来自相机光圈的开合机制——叶片在收缩与展开之间循环,赋予画面一种均匀呼吸的节奏感。闭合时线条向中心聚拢成放射状,舒展时线条随旋转...

GSAP滚动弯曲轨迹时间轴、事件线图文展示组件

滚动时间轴

GSAP滚动弯曲轨迹时间轴、事件线图文展示组件

这是一款滚动弯曲事件轴轨迹图文展示布局效果,基于 Scroll-Animation API+ScrollTrigger+CSS 技术实现 —— 能让页面图文区块内容随着滚动呈现分层入场的解构式动...

极具创意的万圣节诡异蜘蛛爬行模拟时钟(SVG+GSAP)

蜘蛛时钟

极具创意的万圣节诡异蜘蛛爬行模拟时钟(SVG+GSAP)

这是一款万圣节主题的蜘蛛时钟效果,基于 CSS + JavaScript(借助 GSAP 动画库及 MorphSVGPlugin)技术实现,以蜘蛛造型的指针在蛛网与数字构成的时钟界面上动态摆动,...

CSS创意彩色海洋风格弯曲时间轴

彩色时间轴

CSS创意彩色海洋风格弯曲时间轴

这是一款纯CSS实现的彩色曲线时间轴,以《多功能马里奥》游戏发展史为演示案例,详细列出了每个关键时间节点事件,适用于游戏史展示或其他历史进程事件介绍场景。

CSS悬停文字3D波浪形弯曲动态反馈效果

悬停效果

CSS悬停文字3D波浪形弯曲动态反馈效果

这是一款基于纯CSS实现的悬停交互效果,通过过渡和变形实现元素响应鼠标悬停的视觉反馈,适用于文字、卡片等交互元素增强用户体验。

GSAP Canvas 手绘涂鸦蠕虫动画效果

蠕虫效果

GSAP Canvas 手绘涂鸦蠕虫动画效果

这是一款动态手绘蠕虫涂鸦效果,基于GSAP+Canvas技术实现,通过流畅的动画模拟手绘线条的绘制过程,线条以自然的弯曲和抖动效果呈现,为用户带来生动且富有艺术感的视觉体验。适用于创意展示或个性...

GSAP+Zepto视差3D向屏幕外延伸的弯曲形图片轮播插件,可通过鼠标或者手指拖动控制图片切换

视差轮播

GSAP+Zepto视差3D向屏幕外延伸的弯曲形图片轮播插件,可通过鼠标或者手指拖动控制图片切换

​这是一款带有3D视差效果的照片墙展示效果,基于GSAP+Zepto技术实现。多张照片在页面中呈现横向延伸出屏幕的3D效果,这种3D弧形的照片展示效果支持通过鼠标或者手指直接拖动照片进行轮播操作...

CSS实现图片在三维空间中被弯曲卷起,极具科幻风格的3D图片卷轴效果

3D卷轴

CSS实现图片在三维空间中被弯曲卷起,极具科幻风格的3D图片卷轴效果

一款在HTML网页中通过scss实现的3D图片卷轴变换动画效果,通过CSS的transform-style: preserve-3d来实现的3D立体效果,效果为图片在3维空间中弯曲卷起。极具科幻...

SVG波浪线波动起伏动画效果,含多种颜色以及多种弯曲弧度

水波纹

SVG波浪线波动起伏动画效果,含多种颜色以及多种弯曲弧度

这个效果通过使用SVG(可缩放矢量图形)和CSS以及少量的JS代码创建的波浪动画。实现原理:通过动画化SVG polyline 元素的点(points),使其呈现出波动的效果,看起来像是水波或海浪。

CSS实现的闪电霹雳图标效果

闪电形状

CSS实现的闪电霹雳图标效果

通过设置CSS属性的clip-path: polygon以及aspect-ratio合理值创建的闪电霹雳形状图标效果,支持对闪电形状的弯曲度、颜色等效果进行自定义。