自适应圆形头像组件#

src/components/widget/Profile.astro 的头像组件保留响应式最大宽度，增加正方形约束和圆形裁切：

1
class="group block relative mx-auto mt-1 lg:mt-0 mb-3
2
  max-w-36 lg:max-w-48 aspect-square overflow-hidden rounded-full active:scale-95"

• aspect-square ：容器高度始终等于宽度，即使源图片不是正方形。
• overflow-hidden rounded-full：将容器及内部内容裁为圆形。

悬停旋转#

1
:global(.profile-avatar-image) {
2
  transition: transform 1s ease-out;
3
}
4

5
.group:hover :global(.profile-avatar-image) {
6
  transform: rotate(360deg);
7
}

• transform 1s ease-out ：设置动画为一秒，效果为以慢速结束的过渡动画。
• rotate(360deg) ：旋转 360 度。

该元素为 ImageWrapper 生成的图片包装元素的内部元素，故样式需要使用 :global() 才能命中内部组件 profile-avatar-image 。