logo
简体中文

导航菜单

文档

ImagesCircle 圆圈图片

简介

3D透视图片展示组件，模拟图片从远处走向观者的立体效果。中间的图片”走得最快”因此显得最大最近，两侧的图片”走得较慢”因此显得较小较远，营造出强烈的空间层次感。

组件特性：

  • 真实的3D透视效果，模拟深度空间
  • 中心图片最大最清晰，侧边图片渐小渐模糊
  • 智能的3D位置计算算法
  • 支持多张图片的立体排列（仅限奇数个图片）
  • 轻微的旋转和透明度变化增强立体感
  • 响应式设计，移动端优化性能

重要提示： 组件只接受奇数个图片（至少 3 张），以确保有明确的中心图片。如果提供偶数个图片，组件将显示错误信息。

案例

图片 1
图片 2
图片 3
图片 4
图片 5

Props

background

背景颜色设置。

图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-none-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-none-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-none-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-blue-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-blue-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-blue-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle
  images={images}
  size="sm"
  spacing="sm"
  background="info/20"
  class="cosy:p-8 cosy:rounded-xl"
/>

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-purple-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-purple-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "bg-purple-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle
  images={images}
  size="sm"
  spacing="sm"
  background="accent/20"
  class="cosy:p-8 cosy:rounded-xl"
/>

class

自定义 CSS 类名，用于覆盖默认样式。

图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-default-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-default-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-default-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-border-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-border-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-border-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle
  images={images}
  size="sm"
  spacing="sm"
  class="cosy:border-4 cosy:border-dashed cosy:border-blue-300 cosy:bg-blue-50 cosy:p-6 cosy:rounded-2xl"
/>

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-gradient-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-gradient-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200, tag: "class-gradient-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle
  images={images}
  size="sm"
  spacing="sm"
  class="cosy:bg-gradient-to-r cosy:from-purple-400 cosy:via-pink-500 cosy:to-red-500 cosy:p-8 cosy:rounded-full"
/>

images

图片源数组，支持两种类型。图片按顺序从左到右排列，中间位置的图片会自动成为焦点，显示最大最清晰。必须提供奇数个图片（至少 3 张）。

图片 1
图片 2
图片 3
图片 4
图片 5
图片 1
图片 2
图片 3
图片 4
图片 5
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

// 使用字符串 URL 的图片数组
const images = [
	getProductImage({ width: 300, height: 300, tag: "watch-main" }),
	getProductImage({ width: 250, height: 250, tag: "watch-band-1" }),
	getProductImage({ width: 250, height: 250, tag: "watch-band-2" }),
	getProductImage({ width: 250, height: 250, tag: "watch-band-3" }),
	getProductImage({ width: 250, height: 250, tag: "watch-band-4" }),
];
---

<ImagesCircle images={images} size="md" shadow="lg" rounded="xl" spacing="xl" />

---



import { ImagesCircle } from "@coffic/cosy-ui";
import astroImage from "@/assets/astro.svg";
import backgroundImage from "@/assets/background.svg";
import bookImage from "@/assets/book.png";
import faviconImage from "@/assets/favicon.png";
// 从 assets 目录导入图片
import heroImage from "@/assets/hero.png";

// 使用导入的 ImageMetadata 对象的图片数组
const images = [
	heroImage,
	bookImage,
	faviconImage,
	astroImage,
	backgroundImage,
];
---

<ImagesCircle images={images} size="md" shadow="lg" rounded="xl" spacing="xl" />

rounded

图片圆角大小，从无圆角到完全圆形。

图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150, tag: "rounded-none-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "rounded-none-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "rounded-none-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" rounded="none" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150, tag: "rounded-full-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "rounded-full-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "rounded-full-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" rounded="full" />

shadow

图片阴影效果，增强立体感和层次感。

图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150, tag: "shadow-none-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "shadow-none-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "shadow-none-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" shadow="none" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150, tag: "shadow-xl-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "shadow-xl-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "shadow-xl-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" shadow="xl" />

size

组件大小，影响图片尺寸和整体圆圈大小。

图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150, tag: "size-sm-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "size-sm-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150, tag: "size-sm-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 180, height: 180, tag: "size-md-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 180, height: 180, tag: "size-md-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 180, height: 180, tag: "size-md-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="md" spacing="md" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 240, height: 240, tag: "size-lg-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 240, height: 240, tag: "size-lg-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 240, height: 240, tag: "size-lg-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="lg" spacing="lg" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 300, height: 300, tag: "size-xl-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 300, height: 300, tag: "size-xl-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 300, height: 300, tag: "size-xl-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="xl" spacing="xl" />

spacing

圆圈大小（图片到中心的距离），控制图片分布的紧密程度。

图片 1
图片 2
图片 3
图片 1
图片 2
图片 3
---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 120, height: 120, tag: "spacing-sm-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 120, height: 120, tag: "spacing-sm-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 120, height: 120, tag: "spacing-sm-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="sm" />

---



import { getProductImage, ImagesCircle } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 120, height: 120, tag: "spacing-xl-1" }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 120, height: 120, tag: "spacing-xl-2" }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 120, height: 120, tag: "spacing-xl-3" }),
		alt: "图片 3",
	},
];
---

<ImagesCircle images={images} size="sm" spacing="xl" />

搜索