javascript
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一學(xué)子或者是真心想學(xué)習(xí)剛?cè)腴T的小伙伴可以私聊我，若你是真心學(xué)習(xí)可以送你書籍，指導(dǎo)你學(xué)習(xí)，給予你目標(biāo)方向的學(xué)習(xí)路線，無套路，博客為證。
本節(jié)案例如下（其他動(dòng)效篇幅原因逐步講解，歡迎三連）：
一、線性漸變
1.1 漸變分類
在 CSS 中，使用漸變色需要用到 gradient 屬性，而 gradient 屬性分為 線性漸變 linear-gradient 與 徑向漸變 radial-gradient。
線性漸變 和 徑向漸變的不同在于漸變色方向不同，線性漸變的漸變方向可以指定為 上下左右、角度以及對角漸變，徑向漸變的方向則是基于某個(gè)中心點(diǎn)。
例如咱們使用一個(gè)線性漸變給定漸變方向?yàn)樯舷?#xff0c;漸變色為紅橙，那么可以寫成：
<style>background: linear-gradient( rgb(255, 123, 0), rgb(255, 0, 0)); </style>1.2 漸變色默認(rèn)（上下）方向
默認(rèn)情況下，線性漸變?yōu)樯舷聺u變。在以上 css 代碼，給定 background 漸變色，給予漸變色使用linear-gradient 或者 radial-gradient，在此使用 linear-gradient 表示給予線性漸變，在線性漸變的參數(shù)中，給予對應(yīng)的顏色，在此給予了 兩個(gè) rgb 值，一個(gè)為橙色 rgb(255, 123, 0) 另一個(gè)為紅色 rgb(255, 0, 0)，兩者間使用逗號(hào)進(jìn)行間隔，那么此時(shí)的圖片如下：
因?yàn)榈谝粋€(gè)顏色給予的是橙色，所以頂部的顏色為橙色，第二個(gè)顏色給予的顏色是紅色，所以此時(shí)在 div 中的顏色為紅色。
千萬不要認(rèn)為漸變色只能給予兩個(gè)顏色，漸變色還可以給予多個(gè)顏色，例如以下示例：
<style>background: linear-gradient( rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255)); </style>以上示例漸變色給予了多個(gè)不同的顏色，使用漸變色時(shí)會(huì)將這些顏色自動(dòng)的進(jìn)行過度，以下是漸變色效果：
1.3 給予漸變方向漸變色
漸變色還可以給予默認(rèn)的漸變色方向，例如左右漸變；左右漸變的默認(rèn)起始方向是左，只需要給第一個(gè)參數(shù)一個(gè)方向值即可，在此給予一個(gè)漸變色參數(shù)為 to right, 表示漸變色方向從左往右：
<style>background: linear-gradient(to right, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255)); </style>那么此時(shí)漸變色的朝向則會(huì)發(fā)生改變：
1.4 給予對角漸變色
對角漸變表示給予一個(gè)叫，使?jié)u變色往該方向進(jìn)行漸變，例如 bottom left 表示左下角、bottom right 表示右下角，那么左下角的漸變更改方向即可，編寫如下：
<style>background: linear-gradient(to bottom left, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255)); </style>效果如下：
右下角的漸變色編寫如下：
效果如下：
1.5 給予角度漸變色
除了對應(yīng)的固定方向，我們還可以填寫對應(yīng)角度使?jié)u變色朝著固定方向漸變。例如如下代碼示例：
<style>background: linear-gradient(0deg, rgb(255, 123, 0), rgb(246, 255, 0), rgb(89, 255, 0), rgb(0, 251, 255), rgb(0, 51, 255)) , red, blue) </style>其中的 0deg 表示角度為 0，deg 是角度單位，默認(rèn)情況是上下漸變，若角度值為正，表示順時(shí)針旋轉(zhuǎn)角度，若角度為負(fù)，表示逆時(shí)針選準(zhǔn)漸變方向。
此時(shí)我們給予角度為 90deg，那么此時(shí)漸變方向?yàn)閺挠业阶?#xff1a;
如果角度為 -90deg 那么則是從左到右：
我們還可以給予其他角度，例如 10deg、20deg 可以去進(jìn)行嘗試，由于內(nèi)容過于贅述在此不在贅述，讀者自行進(jìn)行修改演示即可。
1.6 漸變線（重點(diǎn)）
漸變線在漸變中是指漸變顏色停止的線，漸變線可以指定位置，并且可以通過漸變線使?jié)u變色居于某一個(gè)范圍之內(nèi)，漸變線的使用一定是要在 2 種漸變色以上。
例如如下示例：
該示漸變色為左上角到右下角漸變，顏色依次是紅、綠、藍(lán)，這三種顏色如何做到藍(lán)色漸變只有一小塊，而大部分是綠色漸變，我們仔細(xì)觀察，紅色的非漸變區(qū)域只有左上角一小部分，那如何制作出這樣的漸變效果呢？
要完成這個(gè)效果，我們需要給予漸變線位置，也就是確定停止顏色為純色的分界線位置。如以下代碼：
<style>background: linear-gradient(to bottom right, red 5%, green 90%, blue 100%); </style>該代碼我們可以得知，這個(gè)漸變方向?yàn)樽笊辖堑接蚁陆沁M(jìn)行漸變，并且給予的顏色是 紅綠藍(lán)，但在這些顏色之后分別帶上了對應(yīng)的百分比，這些百分比就是表示這些顏色在什么地方停止。
我們用其中一個(gè)顏色舉例，例如 red 5%，表示這個(gè)紅色在整個(gè)顏色范圍的 5% 時(shí)停止純色范圍，開始進(jìn)行漸變，這個(gè)范圍指的是從初始位置開始到結(jié)束方向的百分比范圍，例如如圖：
在這里的 red 5% 指的是紅色的顏色純色停止范圍在漸變方向上范圍的 5% 處，所以在漸變中表現(xiàn)為 5% 之后是綠色和紅色的漸變范圍：
此時(shí)綠色的漸變線在分享的 90% 處：
那么之后的就是藍(lán)色顏色，因?yàn)樗{(lán)色漸變線在終點(diǎn) 100% 處，由此形成了這個(gè)漸變范圍。
1.7 重復(fù)漸變
漸變色還可以進(jìn)行重復(fù)漸變，例如：
只需要將 linear-gradient 更改為 repeating-linear-gradient 即可，例如：
此時(shí)漸變色將會(huì)不充滿整個(gè)空間，而是重復(fù)執(zhí)行漸變。
線性漸變完整代碼調(diào)用代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動(dòng)效實(shí)戰(zhàn)課程之漸變色操作</title><style>.gradient-to-down {background: repeating-linear-gradient(to bottom right, red 5%, green 10%, blue 15%);}div {height: 200px;width: 200px;}</style> </head><body><div class="gradient-to-down"></div> </body></html>二、 徑向漸變
2.1 徑向漸變
徑向漸變我們可以看成是一個(gè)點(diǎn)（圓）的建表，通過定義這個(gè)點(diǎn)的位置和漸變形狀，完成漸變需求。
我們先看一個(gè)簡單的徑向漸變：
<style>background: radial-gradient(red, green, blue); </style>我們由此得知，徑向漸變使用 radial-gradient；在這個(gè)徑向漸變中使用了 紅綠藍(lán) 三種顏色，這三種顏色的徑向漸變?nèi)缦?#xff1a;
當(dāng)然我們也可以使用多種顏色進(jìn)行漸變，在此不在進(jìn)行贅述。
2.2 漸變形狀
徑向漸變可以設(shè)置漸變形狀，例如我設(shè)置一個(gè)水平半徑為50px，垂直半徑為 100px 的徑向漸變，代碼如下：
<style>background: radial-gradient(50px 100px, red, green, blue) </style>效果如下：
此時(shí)由于半徑小于垂直半徑，此時(shí)漸變將會(huì)看成是一個(gè)橢圓狀。
我們也可以擴(kuò)大漸變范圍，例如垂直半徑為300px：
<style>background: radial-gradient(50px 300px, red, green, blue) </style>效果如下：
由于這個(gè)div 大小為 200*200px 在此會(huì)超出可視范圍，但我們也能感受其效果。
注意，更改形狀也有限定大小作用。
2.3 漸變中心
除了更改漸變形狀，我們還可以更改徑向漸變的中心點(diǎn)位置，例如如下代碼：
<style>background: radial-gradient(at 10% 30%, red, green, blue) </style>顯示效果如下：
此時(shí) at 10% 30% 表示圓心點(diǎn)位置在從左到右 x 軸的 10% 以及 y 軸從上到下的 30% 處，at 之后則是位置信息，也可以使用單位值進(jìn)行代替：
<style>background: radial-gradient(at 50px 100px, red, green, blue) </style>效果如下：
更改中心點(diǎn)以及形狀可以同時(shí)使用：
效果如下：
其他操作跟線性漸變一致，例如限定漸變范圍：
效果如下：
又或者是重復(fù)漸變，代碼如下：
效果如下：
此部分完整代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動(dòng)效實(shí)戰(zhàn)課程之漸變色操作</title><style>.radial-gradient-demo {background: repeating-radial-gradient(red 10%, green 15%, blue 20%)}div {height: 200px;width: 200px;}</style> </head><body><div class="radial-gradient-demo"></div> </body></html>2.4 漸變邊緣控制
再進(jìn)行徑向漸變時(shí)，我們還可以對漸變邊緣進(jìn)行控制，例如在一般漸變時(shí)，咱們的邊緣是這樣的：
這是因?yàn)樽詈蟮臐u變色為一個(gè)顏色，若我們使用最后一個(gè)顏色為透明色那么即可使當(dāng)前的漸變產(chǎn)生一種發(fā)散效果，這個(gè)時(shí)候就得使用 rgba 進(jìn)行漸變。
我們一般情況下純色使用 rgb 進(jìn)行表示，這個(gè) rgba 的 a 表示透明度，例如我們現(xiàn)在給予一個(gè) a 值為 0 即一個(gè)透明顏色進(jìn)行漸變，那么即可使該漸變邊緣透明：
<style>background: radial-gradient(red 10%, green 15%, rgba(0, 0, 255, 0) 20%) </style>可以看到，此漸變代碼 種的 三種顏色分別是 紅綠和 rgba(0, 0, 255, 0)， rgba(0, 0, 255, 0) 的 rgb 值分別是 0、0、255 以及最后一個(gè) 0，a 的取值可以從 0-1 進(jìn)行取值，1則表示不透明，0則表示透明，那么此時(shí)這個(gè)顏色不管取啥，由于透明度取 0，則是透明色，那么頁面漸變顯示如下：
也可以漸變一種顏色與透明色：
<style>background: radial-gradient(red,rgba(0, 0, 255, 0)) </style>顯示如下：
此時(shí)并沒有表達(dá)到我們想要的邊緣透明的效果，我們需要增加對應(yīng)的 size 參數(shù)，size 參數(shù)可選為 closest-side、farthest-side、closest-corner、farthest-corner：
- closest-side 表示當(dāng)前尺寸大小與中心點(diǎn)最近的 邊 的距離
- farthest-side 表示當(dāng)前尺寸大小與中心點(diǎn)最遠(yuǎn)的 邊 的距離
- closest-corner 表示當(dāng)前尺寸大小與中心點(diǎn)最近的 角 的距離
- farthest-corner 表示當(dāng)前尺寸大小與中心點(diǎn)最遠(yuǎn)的 角 的距離
那么代碼就可以寫成：
<style>background: radial-gradient(closest-side, red, rgba(0, 0, 255, 0)) </style>此時(shí)我增加了 closest-side ，設(shè)定當(dāng)前尺寸遇到最近的邊的距離為漸變大小，那么此時(shí)效果如下：
若此時(shí)你切換成 farthest-side 進(jìn)行設(shè)置效果也一樣，因?yàn)楫?dāng)前只有一條邊，即是最遠(yuǎn)也是最近；若設(shè)置為 closest-corner 效果如下：
此時(shí)將會(huì)把漸變尺寸的大小設(shè)置為遇到角的距離為大小，若設(shè)置為 farthest-corner 效果也一樣，因?yàn)橹挥羞@四個(gè)角。
三、漸變色實(shí)戰(zhàn)
案例如下：
3.1 背景移動(dòng)
背景移動(dòng)使用 background-position 屬性，當(dāng)我們使用漸變色作為背景時(shí)，需要移動(dòng)漸變色才能時(shí)背景發(fā)生改變。 background-position 定義背景圖片開始繪制的點(diǎn)，接收兩個(gè)參數(shù)，這個(gè)參數(shù)便是這個(gè)開始繪制點(diǎn)的坐標(biāo)，默認(rèn)為左上角，值為0 0。
此時(shí)我們定義一個(gè)樣式：
<style>div {width: 300px;height: 300px;background: url("../img/img05.jpg") no-repeat;} </style>該樣式確認(rèn)了一張圖片進(jìn)行顯示，并且不重復(fù)，那么接下來使用div 后圖片直接作為背景，顯示如下：
可以發(fā)現(xiàn)，此圖片超出范圍并不進(jìn)行顯示，此時(shí)我們使用 background-position 更改樣式后如下：
background-position 確定顯示點(diǎn)為圖片中心，此時(shí)頁面效果如下：
接下來咱們就需要使用該屬性移動(dòng)漸變色背景，使其發(fā)生改變。
3.2 漸變色移動(dòng)背景
在一般的網(wǎng)站中，有時(shí)我們可以看到一些漸變色背景并且移動(dòng)的示例，那么如何使?jié)u變色進(jìn)行移動(dòng)呢？
漸變色移動(dòng)需要使用對應(yīng)的動(dòng)畫，動(dòng)畫使用 animation 屬性，并且還需要定義一個(gè)幀動(dòng)畫。
在定義動(dòng)畫前，我們還需要使用 background-size 屬性對漸變色進(jìn)行放大，否則無法移動(dòng)漸變色背景，畢竟如果你不放大，那么這個(gè)漸變色就容器那么大，無法進(jìn)行移動(dòng)。
此時(shí)我們創(chuàng)建一個(gè) 類樣式 ，命名為 .float-gradient，并且在其內(nèi)部加上漸變色代碼：
<style>.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;} </style>以上代碼中 background-size 使?jié)u變色范圍放大 5倍，包括橫軸豎軸方向；接著我們增加一個(gè)動(dòng)畫：
<style>.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;animation: moiveAnimation 15s;} </style>以上樣式代碼中 animation 定義動(dòng)畫，moiveAnimation 是自定義動(dòng)畫的動(dòng)畫名稱，15s 表示 15秒一個(gè)周期，s表示單位為秒，若想動(dòng)畫循環(huán)播放，需要增加 infinite：animation: moiveAnimation 15s infinite;
接下來我們就需要開始創(chuàng)建一個(gè)動(dòng)畫：
<style>@keyframes moiveAnimation {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}} </style>以上就是一個(gè)動(dòng)畫的創(chuàng)建 @keyframes 表示創(chuàng)建一個(gè)動(dòng)畫，moiveAnimation 為動(dòng)畫名，其內(nèi)部就是這個(gè)動(dòng)畫過程；0% 表示當(dāng)動(dòng)畫周期到 0% 時(shí)的背景狀態(tài)，background-position 表示當(dāng)前背景在此時(shí)刻移動(dòng)至何位置，在此定義了 3 個(gè)狀態(tài)，起始是移動(dòng)至左側(cè)中心、隨后移動(dòng)至右側(cè)中心，最后移動(dòng)至原本位置，那么直接給予 body 這個(gè)樣式即可。
接下來我們需要給予一個(gè)文本，需要水平居中，直接設(shè)置 body 內(nèi)容：
<style>body {margin: 0 0;text-align: center;} </style>并且設(shè)置 span 直接距離頂部一定距離，設(shè)置大小、設(shè)置元素種類（此內(nèi)容之前的課程有講，在此不再贅述）：
<style>span {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;} </style>那么此時(shí)就完成了移動(dòng)漸變色背景制作，此部分完整代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動(dòng)效實(shí)戰(zhàn)課程之漸變色操作</title><style>body {margin: 0 0;text-align: center;}span {display: inline-block;margin-top: 300px;font-size: 50px;color: aliceblue;font-weight: bold;}.float-gradient {background: linear-gradient(-45deg, #990066, #FFCC00, #CC0033);background-size: 500% 500%;animation: moiveAnimation 15s infinite;}@keyframes moiveAnimation {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}</style> </head><body class="float-gradient"><span>純 CSS 浮動(dòng)背景——1_bit CSS動(dòng)效實(shí)戰(zhàn)課程</span> </body></html>效果如下：
3.3 徑向漸變背景
制作示例如下：
如果你對線性漸變背景不滿意，還可以使用徑向漸變作為背景。
此時(shí)我們可以直接設(shè)置當(dāng)前背景圖為漸變色，為了更好演示，直接設(shè)置當(dāng)前類樣式在 body 中調(diào)用：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動(dòng)效實(shí)戰(zhàn)課程之漸變色操作</title><style>.radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0));background-size: 130vw 130vh;background-position: -80vw -80vh;}</style> </head><body class="radial-gradient-demo"></body></html>此時(shí)我們可以看到，設(shè)置了一個(gè)漸變色，使用了 closest-side ，在大小設(shè)置為 130vw 130vh（vw和vh是視窗大小），background-position 也用視窗位置指定了，效果如下：
此時(shí)效果為何有 4 個(gè)漸變色？這是因?yàn)樵O(shè)置背景圖片時(shí)沒有給予不重復(fù)指定，否則漸變色將會(huì)重復(fù)鋪滿整個(gè)背景圖區(qū)域，在此直接設(shè)置背景不能重復(fù)，在 類樣式中添加：
<style>background-repeat: no-repeat; </style>這時(shí)，演示如下：
那如何做到很多顏色呢？這時(shí)只需要添加多個(gè)漸變顏色即可，樣式如下：
以上 css 代碼，設(shè)置多個(gè)漸變色以及多個(gè) size、position，頁面如何需要大家耐心設(shè)置，否則樣式將會(huì)不好看，奇奇怪怪，在這里設(shè)置了右上角漸變，演示如下：
接著設(shè)置左下角：
<style> .radial-gradient-demo {background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh;background-repeat: no-repeat; } </style>演示如下：
接著右下角：
演示如下：
為了使整個(gè)頁面表現(xiàn)更好，我們可以再設(shè)置一個(gè)背景色使當(dāng)前頁面更舒服：
<style> .radial-gradient-demo {background-color: #CC0033;background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(11, 243, 197), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat; } </style>演示效果如下：
是不是魔法就誕生了？接下來我們還需要讓這些類似的光影動(dòng)起來，那么需要設(shè)置動(dòng)畫：
在設(shè)置時(shí)一定要注意上圖所說要點(diǎn)。
此時(shí)設(shè)置完第一個(gè)動(dòng)畫，頁面效果如下：
不好意思，鼠標(biāo)影響了觀感。
接著依次設(shè)置剩下的動(dòng)畫效果，最終代碼如下：
若覺得藍(lán)色太亮，可以修改為其他顏色：
接著我們設(shè)置文本：
為了居中，我們再設(shè)置樣式：
<style> body {text-align: center; }span {line-height: 100vh;font-size: 50px;color: white; } </style>直接設(shè)置 span 行高為整個(gè)屏幕行高即可垂直居中。
完整代碼如下：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>gradient 1_bit CSS 動(dòng)效實(shí)戰(zhàn)課程之漸變色操作</title><style>body {text-align: center;}span {line-height: 100vh;font-size: 50px;color: white;}.radial-gradient-demo {background-color: #CC0033;background-image: radial-gradient(closest-side, rgb(232, 49, 13), rgba(235, 105, 78, 0)), radial-gradient(closest-side, rgb(7, 92, 75), rgba(243, 11, 164, 0)), radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)), radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;background-repeat: no-repeat;animation: 15s moiveAnimation infinite;}@keyframes moiveAnimation {0%,100% {background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;}25% {background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;}50% {background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;}75% {background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;}}</style> </head><body class="radial-gradient-demo"><span>純 CSS 漸變浮動(dòng)背景——1_bit CSS動(dòng)效實(shí)戰(zhàn)課程</span> </body></html>演示如下：
該漸變樣式還可以用在不同的元素之中當(dāng)作背景。
總結(jié)
以上是生活随笔為你收集整理的01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英特尔右键控制面板
- 下一篇： 分享一个聊天机器人接口API，很好用，智