Halo Glow Effect

The Halo component is used to add a dynamic glow effect to its child elements, enhancing the visual appeal and depth of the user interface. This component supports customization of glow color, radius, and animation duration, offering high flexibility and customization.

Basic Usage

Use the glow effect by wrapping content within the <ol-halo> tag.

FAILED

在 github 中打开

展开代码

复制代码

<template>
  <div class="w-full h-300px flex justify-center items-center">
    <ol-halo halo-color="#8e5cd9">
      <ol-image className="w-180px h-auto" src="/logo.png" />
    </ol-halo>
  </div>
</template>

Rainbow Glow Effect

You can pass an array of colors to create a gradient glow effect and set the animation time. This effect adds more visual interest and dynamism to the user interface.

FAILED

在 github 中打开

展开代码

复制代码

<template>
  <div class="w-full h-300px flex justify-center items-center">
    <ol-halo :halo-color="['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']" :duration="5000">
      <ol-image className="w-180px h-auto" src="/logo.png" />
    </ol-halo>
  </div>
</template>

Animation Duration

You can pass an animation duration to set the glow effect's animation time. Adjusting the animation duration can affect the speed and smoothness of the glow effect, providing more customization possibilities.

FAILED

在 github 中打开

展开代码

复制代码

<template>
  <div class="w-full h-300px flex justify-center items-center">
    <ol-halo :halo-color="['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']" :duration="2000">
      <ol-image className="w-180px h-auto" src="/logo.png" />
    </ol-halo>
  </div>
</template>

Custom Glow Radius

You can pass a glow radius to set the radius of the glow effect. Adjusting the glow radius can affect the range and intensity of the glow effect, providing more customization possibilities.

FAILED

在 github 中打开

展开代码

复制代码

<template>
  <div class="w-full h-300px flex justify-center items-center">
    <ol-halo :halo-radius="1" :halo-color="['#8e5cd9']" :duration="3000">
      <ol-image className="w-180px h-auto" src="/logo.png" />
    </ol-halo>
  </div>
</template>

Offset Glow Effect

You can pass offset values to set the offset position of the glow effect. Adjusting the offset values can affect the position and direction of the glow effect, providing more customization possibilities.

FAILED

在 github 中打开

展开代码

复制代码

<template>
  <div class="w-full h-300px flex justify-center items-center">
    <ol-halo :halo-radius="1" :halo-color="['#8e5cd9']" :duration="3000" offset-x="15px" offset-y="15px">
      <ol-image className="w-180px h-auto" src="/logo.png" />
    </ol-halo>
  </div>
</template>

Attributes

Attribute Name	Description	Type	Default Value
is	The HTML tag to render	string	'div'
halo-color	Glow color, can be a single color or an array of colors	string | string[]	-
duration	Animation duration (milliseconds)	number	5000
halo-radius	Glow radius (em)	number	6
offset-x	X-axis offset	number | string	0
offset-y	Y-axis offset	number | string	0