这是一款基于CSS view-transition API实现的超椭圆(Squircle)形状图片画廊效果,通过流体般的形态变化打造出独特的视觉体验。超椭圆造型是视觉亮点:整个画廊采用了介于圆形和圆角矩形之间的"超椭圆"造型——这是一种在iOS图标设计中常见的优雅几何形状,比纯圆形更有呼吸感,比圆角矩形更柔和自然。8张图片以不同尺寸的超椭圆容器呈现,围绕中心的主图呈放射状分布,形成视觉焦点,并且加入了悬停图片逐渐缩小的交互效果。
view-transition的魔法:这是重点技术!当用户点击任意小图时,通过浏览器原生的view-transition API实现丝滑的位置和尺寸变换——被点击的图片会平滑地"变形"到中心位置并放大,原中心图片则缩小并移动到被点击图片的原位置。这种过渡动画不是简单的淡入淡出或位移,而是真正的"形态变换",每个像素都在计算最优路径,看起来像是图片在流动。
这种效果特别适合摄影作品集、设计师个人网站、旅行博客、艺术展览线上预览、品牌故事视觉化呈现等需要突出视觉质感的场景。相比传统的方形缩略图网格,超椭圆+流体过渡的组合既有现代科技感,又不失艺术性,能显著提升作品的呈现档次。
















