简介
mg-bitneon 是一个快速创建霓虹发光效果文字的 npm 包,包含了多种可配置参数,可轻松创建出复杂的动态效果。本文将介绍如何使用该 npm 包来创建霓虹发光效果文字。
安装
--- ------- ----------
使用方法
基本用法
----- --------- - ---------------------- ---------------- ------- - ------ -------- ------- ------- ------ --- ----- --- ---
以上代码将创建霓虹发光效果的 Hello World 文字,颜色为白色,效果为霓虹,速度为 60,阴影强度为 0.1。
参数说明
mgbitneon(text, options)
text
(string): 要创建效果的文字。options
(object): 可配置参数。
以下是可配置参数的详细说明:
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
color |
string | "white" |
文字颜色。 |
effect |
string | "neon" |
发光效果。可选值有 "neon" , "fire" , "plasma" 和 "cloud" 。 |
speed |
number | 60 |
效果速度。 |
glow |
number | 0.1 |
阴影强度。 |
padding |
number | 20 |
文字的内边距。 |
以下是效果值所对应的展示效果:
效果 | 效果展示 |
---|---|
"neon" |
|
"fire" |
|
"plasma" |
|
"cloud" |
示例
以下是一个使用 mg-bitneon 创建动态文字效果的示例:
--------- ----- ------ ------ ----------------- ------------ ------- -------------------------------------------- ------- ---- - ----------------- ------ -------- ----- ---------------- ------- ------------ ------- ------- ------ ------- -- - -------- ------- ------ --- ---------------- ---------- -------- ----- ----- - --------------------------------- ----- ------- - - ------ -------- ------- ------- ------ --- ----- ---- -------- --- -- -------------- -- - ----- ------- - -------------------- ---- -- --------- - --------------- - -------- -------------------------- --------- - -- ------ -------------------------- --------- --------- ------- -------
以上示例展示了一个文字不断变换的效果,并且同时提供了用户输入自定义文本的功能。
总结
mg-bitneon 包非常适合用在需要添加动态霓虹发光效果的网站和应用中。使用它能够轻松创建出复杂的动态效果,让页面更加生动有趣。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60066f441d8e776d08040e94