zh-CN 简体中文 项目首页 CDN引入方式 NPM安装 import引入方式 require引入方式 如何使用metal-color-text.css 如何使用metal-color-text.js 在线演示 常见用例 引用metal-color-text
metal-color-text文档
欢迎广大开发者将此文档翻译为其他语言。
CDN引入方式
可选引入metal-color-text.js

<script src="https://unpkg.com/metal-color-text@1.0.0/metal-color-text.js"></script>

可选引入metal-color-text.css

<link rel="stylesheet" href="https://unpkg.com/metal-color-text@1.0.0/metal-color-text.css">

NPM安装

$ npm install metal-color-text

import引入方式

import MetalColorText from 'path/to/metal-color-text';

require引入方式

const MetalColorTextClass = require("path/to/metal-color-text");

如何使用metal-color-text.css
银色文字效果

class="metal-color-text-silver"

暗银色文字效果

class="metal-color-text-darksilver"

亮银色文字效果

class="metal-color-text-brightsilver"

金色文字效果

class="metal-color-text-gold"

暗金色文字效果

class="metal-color-text-darkgold"

亮金色文字效果

class="metal-color-text-brightgold"

铜色文字效果

class="metal-color-text-bronze"

暗铜色文字效果

class="metal-color-text-darkbronze"

亮铜色文字效果

class="metal-color-text-brightbronze"

玫瑰金色文字效果

class="metal-color-text-rosegold"

暗玫瑰金色文字效果

class="metal-color-text-darkrosegold"

亮玫瑰金色文字效果

class="metal-color-text-brightrosegold"

钛色文字效果

class="metal-color-text-titanium"

暗钛色文字效果

class="metal-color-text-darktitanium"

亮钛色文字效果

class="metal-color-text-brighttitanium"

铜绿文字效果

class="metal-color-text-verdigris"

暗铜绿文字效果

class="metal-color-text-darkverdigris"

亮铜绿文字效果

class="metal-color-text-brightverdigris"

胆矾文字效果

class="metal-color-text-bluevitriol"

暗胆矾文字效果

class="metal-color-text-darkbluevitriol"

亮胆矾文字效果

class="metal-color-text-brightbluevitriol"

如何使用metal-color-text.js
初始化样式

const metalColorText = MetalColorText.init(colors, className = 'metal-color-text');

其中,colors是一个包含所有颜色的数组,至少传入2个色值,例如:['#FF0000', '#00FF00', '#0000FF']

如果调用多次init()方法,且className相同,那么样式将被覆盖

添加样式到元素

metalColorText.addTo(element);

元素移除样式

metalColorText.removeFrom(element);

返回当前样式的CSS代码

metalColorText.getCSSCode();

返回当前样式的CSS文本

metalColorText.getCSSText();

在线演示
使用metal-color-text.css
使用metal-color-text.js
常见用例
直播

在直播时需要吸引眼球的文字效果

视频录制

在录制视频时需要特殊风格的文字,和普通的字幕区分开

网站开发

根据主题,不同的网站往往需要不同的文字风格

引用metal-color-text
如果你在学术研究中涉及metal-color-text,那么可以按需引用以下内容。
metal-color-text源码(BibTeX)

@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-color-text}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/metal-color-text}}, }

metal-color-text文档(BibTeX)

@techreport{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-color-text Document}, institution = {BA DU XIN SHANG}, year = {2025}, number = {16}, month = {6}, url = {https://cnoctave.github.io/metal-color-text/index.html}, urldate = {2025-06-16}, }

© 2024-2025 CNOCTAVE © 2024-2025 Yu Hongbo