rainbow-background
Version:
rainbow-background - rainbow background.
342 lines (333 loc) • 21.7 kB
HTML
<html lang="en">
<!--
Copyright 2024-2025 Yu Hongbo <yuhongbo@member.fsf.org>,
CNOCTAVE <cnoctave@qq.com>
Copying and distribution of this file, with or without modification,
are permitted in any medium without royalty provided the copyright
notice and this notice are preserved. This file is offered as-is,
without any warranty.
-->
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
<meta name="theme-color" content="#00B4FF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-TileImage" content="favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="apple-mobile-web-app-title" content="rainbow-background文档">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<title>rainbow-background文档</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="title" content="rainbow-background文档" data-qmeta="title">
<meta property="og:title" content="rainbow-background文档" data-qmeta="ogTitle">
<meta name="twitter:title" content="rainbow-background文档" data-qmeta="twitterTitle">
<meta name="description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="description">
<meta property="og:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="ogDesc">
<meta name="twitter:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="twitterDesc">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div id="q-app">
<q-layout view="hHh LpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar class="bg-primary text-white q-ny-md shadow-2">
<q-btn stretch flat label="Octave中文网" @click="goTo('http://cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="rainbow-background文档" @click="scrollToTop()"></q-btn>
<q-separator dark vertical></q-separator>
<q-space></q-space>
<q-separator dark vertical></q-separator>
<q-btn-dropdown stretch flat icon="translate" label="切换文档语言">
<q-list>
<q-item clickable v-close-popup @click="goTo('index.html')">
<q-item-section>
<q-item-label>zh-CN 简体中文</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="中文版Octave文档" @click="goTo('http://docs.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="学术交流论坛" @click="goTo('http://forum.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="新闻" @click="goTo('https://octave.org/news.html')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="使用方法" @click="goTo('https://wiki.octave.org/Using_Octave')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="免费下载" @click="goTo('https://octave.org/download')"></q-btn>
</q-toolbar>
</q-header>
<q-drawer class="bg-primary" show-if-above v-model="leftDrawerOpen" side="left" bordered elevated>
<q-list class="title1 text-white bg-primary">
<q-item clickable v-ripple @click="goToID('#homepage')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
项目首页
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#cdn')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
CDN引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#npm')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
NPM安装
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#import')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
import引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#require')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
require引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#how_to_use_css')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
如何使用rainbow-background.css
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#how_to_use_js')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
如何使用rainbow-background.js
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#live_demo')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
在线演示
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#common_examples')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
常见用例
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#references')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
引用rainbow-background
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<div style="position: relative;">
<q-img src="banner0.png" spinner-color="white" style="width: 100%; height: 300px;"></q-img>
<div class="q-mx-md rainbow-text"
style="line-height: 300px; font-size: 100px; position: absolute; left: 0%; top: 0%;">rainbow-background文档
</div>
</div>
<div class="container">
<div class="main">
<div class="text-h5 q-ma-md text-red-10">欢迎广大开发者将此文档翻译为其他语言。</div>
<q-btn id="homepage" class="title1 text-white bg-primary" stretch flat
label="项目首页：https://github.com/CNOCTAVE/rainbow-background" @click="goTo('https://github.com/CNOCTAVE/rainbow-background')"></q-btn>
<q-separator></q-separator>
<div id="cdn" class="title1 q-ma-md text-primary">CDN引入方式</div>
<div class="text-h5 q-ma-md text-red-10">可选引入rainbow-background.js</div>
<p class="q-ma-md"><script src="https://unpkg.com/rainbow-background@1.0.0/rainbow-background.js"></script></p>
<div class="text-h5 q-ma-md text-red-10">可选引入rainbow-background.css</div>
<p class="q-ma-md"><link rel="stylesheet" href="https://unpkg.com/rainbow-background@1.0.0/rainbow-background.css"></p>
<q-separator></q-separator>
<div id="npm" class="title1 q-ma-md text-primary">NPM安装</div>
<p class="q-ma-md">$ npm install rainbow-background</p>
<q-separator></q-separator>
<div id="import" class="title1 q-ma-md text-primary">import引入方式</div>
<p class="q-ma-md">import RainbowBackground from 'path/to/rainbow-background';</p>
<q-separator></q-separator>
<div id="require" class="title1 q-ma-md text-primary">require引入方式</div>
<p class="q-ma-md">const RainbowBackgroundClass = require("path/to/rainbow-background");</p>
<q-separator></q-separator>
<div id="how_to_use_css" class="title1 q-ma-md text-primary">如何使用rainbow-background.css</div>
<div class="text-h5 q-ma-md text-red-10">jet背景效果</div>
<p class="q-ma-md">class="rainbow-background-jet"</p>
<div class="text-h5 q-ma-md text-red-10">viridis背景效果</div>
<p class="q-ma-md">class="rainbow-background-viridis"</p>
<div class="text-h5 q-ma-md text-red-10">turbo背景效果</div>
<p class="q-ma-md">class="rainbow-background-turbo"</p>
<div class="text-h5 q-ma-md text-red-10">cubehelix背景效果</div>
<p class="q-ma-md">class="rainbow-background-cubehelix"</p>
<div class="text-h5 q-ma-md text-red-10">hsv背景效果</div>
<p class="q-ma-md">class="rainbow-background-hsv"</p>
<div class="text-h5 q-ma-md text-red-10">rainbow背景效果</div>
<p class="q-ma-md">class="rainbow-background-rainbow"</p>
<div class="text-h5 q-ma-md text-red-10">hot背景效果</div>
<p class="q-ma-md">class="rainbow-background-hot"</p>
<div class="text-h5 q-ma-md text-red-10">cool背景效果</div>
<p class="q-ma-md">class="rainbow-background-cool"</p>
<div class="text-h5 q-ma-md text-red-10">spring背景效果</div>
<p class="q-ma-md">class="rainbow-background-spring"</p>
<div class="text-h5 q-ma-md text-red-10">summer背景效果</div>
<p class="q-ma-md">class="rainbow-background-summer"</p>
<div class="text-h5 q-ma-md text-red-10">autumn背景效果</div>
<p class="q-ma-md">class="rainbow-background-autumn"</p>
<div class="text-h5 q-ma-md text-red-10">winter背景效果</div>
<p class="q-ma-md">class="rainbow-background-winter"</p>
<div class="text-h5 q-ma-md text-red-10">gray背景效果</div>
<p class="q-ma-md">class="rainbow-background-gray"</p>
<div class="text-h5 q-ma-md text-red-10">bone背景效果</div>
<p class="q-ma-md">class="rainbow-background-bone"</p>
<div class="text-h5 q-ma-md text-red-10">copper背景效果</div>
<p class="q-ma-md">class="rainbow-background-copper"</p>
<div class="text-h5 q-ma-md text-red-10">pink背景效果</div>
<p class="q-ma-md">class="rainbow-background-pink"</p>
<div class="text-h5 q-ma-md text-red-10">ocean背景效果</div>
<p class="q-ma-md">class="rainbow-background-ocean"</p>
<div class="text-h5 q-ma-md text-red-10">colorcube背景效果</div>
<p class="q-ma-md">class="rainbow-background-colorcube"</p>
<div class="text-h5 q-ma-md text-red-10">flag背景效果</div>
<p class="q-ma-md">class="rainbow-background-flag"</p>
<div class="text-h5 q-ma-md text-red-10">lines背景效果</div>
<p class="q-ma-md">class="rainbow-background-lines"</p>
<div class="text-h5 q-ma-md text-red-10">prism背景效果</div>
<p class="q-ma-md">class="rainbow-background-prism"</p>
<q-separator></q-separator>
<div id="how_to_use_js" class="title1 q-ma-md text-primary">如何使用rainbow-background.js</div>
<div class="text-h5 q-ma-md text-red-10">初始化样式</div>
<p class="q-ma-md">const rainbowBackground = RainbowBackground.init(colors, className = 'rainbow-background');</p>
<p class="q-ma-md">其中，colors是一个包含所有颜色的数组，至少传入2个色值，例如：['#0000ff', '#0080ff', '#00ffff', '#80ff80', '#ffff00', '#ff8000', '#ff0000', '#800000']</p>
<p class="q-ma-md">如果调用多次init()方法，且className相同，那么样式将被覆盖</p>
<div class="text-h5 q-ma-md text-red-10">添加样式到元素</div>
<p class="q-ma-md">rainbowBackground.addTo(element);</p>
<div class="text-h5 q-ma-md text-red-10">元素移除样式</div>
<p class="q-ma-md">rainbowBackground.removeFrom(element);</p>
<div class="text-h5 q-ma-md text-red-10">返回当前样式的CSS代码</div>
<p class="q-ma-md">rainbowBackground.getCSSCode();</p>
<div class="text-h5 q-ma-md text-red-10">返回当前样式的CSS文本</div>
<p class="q-ma-md">rainbowBackground.getCSSText();</p>
<q-separator></q-separator>
<div id="live_demo" class="title1 q-ma-md text-primary">在线演示</div>
<div class="text-h5 q-ma-md text-red-10">使用rainbow-background.css</div>
<iframe src="css_example.html" width="100%" height="700px"></iframe>
<div class="text-h5 q-ma-md text-red-10">使用rainbow-background.js</div>
<iframe src="js_example.html" width="100%" height="800px"></iframe>
<q-separator></q-separator>
<div id="common_examples" class="title1 q-ma-md text-primary">常见用例</div>
<div class="text-h5 q-ma-md text-red-10">直播</div>
<p class="q-ma-md">在直播时需要吸引眼球的背景效果</p>
<div class="text-h5 q-ma-md text-red-10">视频录制</div>
<p class="q-ma-md">在录制视频时需要特殊风格的文字，和普通的字幕区分开</p>
<div class="text-h5 q-ma-md text-red-10">网站开发</div>
<p class="q-ma-md">根据主题，不同的网站往往需要不同的文字风格</p>
<q-separator></q-separator>
<div id="references" class="title1 q-ma-md text-primary">引用rainbow-background</div>
<div class="text-h5 q-ma-md text-red-10">如果你在学术研究中涉及rainbow-background，那么可以按需引用以下内容。</div>
<div class="text-h5 q-ma-md text-red-10">rainbow-background源码(BibTeX)</div>
<p class="q-ma-md">@misc{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {rainbow-background},
year = {2025},
howpublished = {\url{https://github.com/CNOCTAVE/rainbow-background}},
}</p>
<div class="text-h5 q-ma-md text-red-10">rainbow-background文档(BibTeX)</div>
<p class="q-ma-md">@techreport{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {rainbow-background Document},
institution = {BA DU XIN SHANG},
year = {2025},
number = {16},
month = {6},
url = {https://cnoctave.github.io/rainbow-background/index.html},
urldate = {2025-06-16},
}</p>
</div>
</div>
<q-toolbar class="bg-grey-8 text-white q-my-md shadow-2">
<q-btn-dropdown stretch flat label="版权所有 ©">
<q-list>
<q-item clickable v-close-popup @click="goTo('http://cnoctave.cn')">
<q-item-section>
<q-item-label>© 2024-2025 CNOCTAVE</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="goTo('https://orcid.org/0009-0007-9436-4161')">
<q-item-section>
<q-item-label>© 2024-2025 Yu Hongbo</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="此文档受Creative Commons Attribution-NoDerivatives 4.0 International License协议保护。"
@click="goTo('https://creativecommons.org/licenses/by-nd/4.0/')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="下载此文档的源码"
@click="goTo('https://github.com/CNOCTAVE/rainbow-background')"></q-btn>
</q-toolbar>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
<script>
const App = {
data() {
return {
scrollToTop() {
window.scrollTo(0, 0);
},
goTo(target) {
window.open(target, '_blank');
},
goToID(target) {
window.open(target, '_self');
},
leftDrawerOpen: true,
};
},
};
const app = Vue.createApp(App);
app.use(Quasar)
app.mount('#q-app')
</script>
<script>
hljs.highlightAll();
</script>
</body>
</html>