WebGL 3D 液态玻璃超大泡泡交互变形效果,点击变换多种形态附着与页面!

多变液态气泡

WebGL 3D 液态玻璃超大泡泡交互变形效果,点击变换多种形态附着与页面!

这是一款 3D 液态玻璃交互效果,基于 WebGL 技术(VFX-JS)实现,精准还原玻璃的透明质感、彩虹色散与高光反射效果,点击泡泡可触发自然流畅的 3D 液态变形动画,视觉表现力极强。适用于...

GSAP趣味减压球交互效果,模拟真实的重力、弹力以及变形物理反馈

解压球

GSAP趣味减压球交互效果,模拟真实的重力、弹力以及变形物理反馈

这是一款基于GSAP动画库实现的“减压球”交互效果,通过拖拽和释放动作触发球体的旋转与弹跳,模拟真实重力与弹力物理反馈,仿佛真实的球类运动。用户可自由选择“压力球”或“网球”模式,体验流畅、富有...

CSS悬停卡片及图片反转圆角变形效果

圆角变形卡片

CSS悬停卡片及图片反转圆角变形效果

这是一款动态形状变换效果,基于CSS clip-path 和过渡动画实现,元素默认带有内凹圆角,悬停时平滑切换为外凸圆角或扭曲变形,适用于创意按钮、卡片或交互式视觉元素。

CSS 创意404动态页面效果

404页面

CSS 创意404动态页面效果

这是一款创意404错误页面动画,基于纯CSS技术实现,通过关键帧动画和变形效果增强404错误码的视觉反馈,适用于网站错误页面的趣味化设计场景。

CSS+SVG粘性螺旋DNA链动态效果

DNA链

CSS+SVG粘性螺旋DNA链动态效果

这是一款DNA彩色双螺旋结构动画,基于CSS+SVG(粘性滤镜)技术实现,通过流体变形效果模拟分子运动,适用于科技主题网站或生物教育类交互场景。

CSS悬停波浪文字动画效果

波浪文字

CSS悬停波浪文字动画效果

这是一款基于 font-variation-settings 和 CSS 动画实现的文字悬停波浪变形效果,通过调节字重宽度参数模拟波动,适用于标题动态展示或数据可视化场景。

SVG+JS实现小星星跳一跳变为小心心动画效果

星变心

SVG+JS实现小星星跳一跳变为小心心动画效果

这是一款形状变形效果,基于SVG技术实现,它展示了如何将满屏的小星星摇身一跳变为了满屏的小心心。通过将形状分解成多个立方贝塞尔曲线段(在心形或星形的情况下使用5段),然后在这两种形状的关键坐标之...

仅HTML单个DIV元素实现的圆形方形循环变幻效果

图形变换

仅HTML单个DIV元素实现的圆形方形循环变幻效果

这是一款循环变形效果,基于CSS技术实现,一个元素通过阴影的巧妙运用看起来像是从圆形平滑过渡到方形再变回圆形,常见变化都在单个HTML元素上完成,利用CSS动画属性实现流畅转变。