Text3D 文字立体效果

用于创建具有 3D 立体感的文字效果。

基础用法

设置 text 属性来指定显示的文字内容。

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" />
  </div>
</template>

自定义层级

通过 layer 属性设置阴影的层数，数值越大立体感越强。

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" :layer="10" />
  </div>
</template>

方向控制

使用 direction 属性控制立体效果的方向，支持 top-left、top-right、bottom-left、bottom-right 四个方向。

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" direction="top-left" />
  </div>
</template>

模糊效果

添加 blur 属性来启用阴影的模糊效果。

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D text="Onionl UI" class="text-100px" :layer="8" blur />
  </div>
</template>

自定义样式

可以通过 color、shadowColor 和 letterSpacing 属性来自定义文字样式。

Onionl UI

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex items-center justify-center h-sm">
    <OlText3D
      text="Onionl UI"
      class="text-100px"
      color="#ff479a"
      shadowColor="#00d0ff"
      letterSpacing="10px"
    />
  </div>
</template>

属性

属性名	说明	类型	默认值
text	显示的文字内容	string	—
color	文字颜色	string	var(--onl-primary)
shadowColor	阴影颜色	string	var(--onl-purple-900)
layer	立体效果的层数	number	5
letterSpacing	字间距	string	'0'
direction	立体效果的方向	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	—
blur	是否启用模糊效果	boolean	false