Skip to content

Halo 发光效果

Halo 组件用于为其子元素添加动态发光效果,能够为用户界面添加视觉上的吸引力和深度感。该组件支持自定义发光颜色、半径和动画持续时间等属性,提供了高度的灵活性和定制性。

基础用法

通过将内容包裹在 <ol-halo> 标签中来使用发光效果。

彩虹发光效果

可以传入颜色数组来创建渐变发光效果,并设置动画时间。这种效果能够为用户界面添加更多的视觉趣味和动态感。

动画时间

可以传入动画时间来设置发光效果的动画时间。动画时间的调整能够影响发光效果的速度和流畅度,提供了更多的定制可能性。

自定义发光半径

可以传入发光半径来设置发光效果的半径。发光半径的调整能够影响发光效果的范围和强度,提供了更多的定制可能性。

带偏移的发光效果

可以传入偏移值来设置发光效果的偏移位置。偏移值的调整能够影响发光效果的位置和方向,提供了更多的定制可能性。

属性

属性名说明类型默认值
is渲染的 HTML 标签string'div'
halo-color发光颜色,可以是单个颜色或颜色数组string | string[]-
duration动画持续时间(毫秒)number5000
halo-radius发光半径(em)number6
offset-xX 轴偏移量number | string0
offset-yY 轴偏移量number | string0