Rain CDN 文档

一行代码让网页下雨。从右上往左下，支持文字、图标、SVG、多色、自定义字体和方向。

快速开始
参数表
文字规则
图标
SVG
方向
自定义字体
JS API
预设效果

快速开始

在你的 HTML 里加这一行：

<script src="https://rain-cdn.goose.cc.cd/rain.js"
  data-rain-text="Rain"
  data-rain-colors="#4fc3f7,#b39ddb,#ff8a65">
</script>

页面立刻下起彩虹色的 "Rain" 字母雨。就这么简单。

所有配置都可以写在 data-rain-* 属性里，也可以通过 window.RainCDN 全局对象传递：

<script>
window.RainCDN = {
  text: '雨,rain',
  colors: '#ff6b6b,#4fc3f7',
  speed: 2,
  size: '18-42'
};
</script>
<script src="rain.js"></script>

注意 window.RainCDN 必须在 rain.js 加载之前设置。

参数表

参数	类型	默认值	说明
`text`	string	-	文字内容。无逗号→拆单字；有逗号→按词组
`icons`	string	-	FontAwesome 图标类名，逗号分隔。例：`fa-solid fa-heart`
`svgs`	string/array	-	SVG 字符串。支持 `currentColor` 继承颜色
`colors`	string/array	`#a0d2db`	颜色列表，逗号分隔。随机取色
`speed`	number	`2`	移动速度基数（每 60 帧移动的像素）
`size`	string/number	`24`	字号。单值如 `24` 自动浮动 ±50%；范围如 `"14-48"` 精确控制
`density`	number	`4`	每秒生成雨滴数量
`direction`	number	`135`	飘落方向（度）。0=右 90=下 180=左 270=上
`wobble`	boolean	`true`	是否横向摆动。传 `"false"` 关闭
`font`	string	-	字体。留空继承页面字体。支持 fallback 链
`font-url`	string	-	TTF/WOFF2 字体文件 URL，自动加载 @font-face
`z-index`	number	`9999`	雨滴容器层级

文字规则

<!-- 无逗号 → 拆成单字: R, a, i, n → 每个字独立一颗雨滴 -->
data-rain-text="Rain"

<!-- 有逗号 → 按词组: "你", "好", "世界" -->
data-rain-text="你,好,世界"

<!-- 特殊字符也能用 -->
data-rain-text=". * + ~ #"

图标

使用 Font Awesome 6 (v6.7.2) 图标。如果页面没有加载 FA，rain.js 会自动引入 cdnjs 的免费版：

<!-- 单个图标 -->
data-rain-icons="fa-solid fa-heart"

<!-- 多个图标，逗号分隔 -->
data-rain-icons="fa-solid fa-heart,fa-solid fa-star,fa-solid fa-cloud"

<!-- 和文字混搭 -->
data-rain-text="Rain"
data-rain-icons="fa-solid fa-droplet"

SVG

直接传 SVG 字符串。用 fill="currentColor" 让颜色跟随雨滴颜色：

<!-- 一个 SVG -->
data-rain-svgs="<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='currentColor'/></svg>"

<!-- 多个 SVG，直接写一起或逗号分隔都可以 -->
data-rain-svgs="
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='currentColor'/></svg>
<svg viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='3' fill='currentColor'/></svg>"

SVG 内部含逗号的属性（如 points="1,2 3,4"）不会被错误切分。

方向

用角度控制雨滴从哪往哪飘。角度 = 0° 即雨滴向右移动，90° 向下移动：

  270° (上)
180° ← ┼ → 0° (右)
      90° (下)
      135° (左下，默认)

角度	方向	雨滴从哪进
0°	向右	左边
45°	右下	左上
90°	向下	顶部
135°	左下	右上
180°	向左	右边
225°	左上	右下
270°	向上	底部
315°	右上	左下

<!-- 直下-->
data-rain-direction="90"

<!-- 右上往左下 -->
data-rain-direction="135"

自定义字体

系统字体

<!-- 楷体 serif 回退 -->
data-rain-font="KaiTi, STKaiti, serif"

<!-- 等宽 -->
data-rain-font="monospace"

TTF 网络字体

<!-- 自动加载 TTF 并应用 -->
data-rain-font-url="https://example.com/my-custom-font.ttf"

<!-- 指定 font 作为 fallback -->
data-rain-font-url="https://example.com/my-font.woff2"
data-rain-font="rain-cdn-font, sans-serif"

JS API

rain.js 会在 window.__rainCDN 上暴露以下方法：

方法	说明
`__rainCDN.stop()`	暂停动画
`__rainCDN.resume()`	恢复动画
`__rainCDN.clear()`	清空所有雨滴
`__rainCDN.destroy()`	完全销毁，移除容器

<script>
// 5 秒后停雨
setTimeout(function () { window.__rainCDN.stop(); }, 5000);

// 10 秒后恢复
setTimeout(function () { window.__rainCDN.resume(); }, 10000);
</script>

预设效果抄作业

彩虹文字雨

data-rain-text="Rain"
data-rain-colors="#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#ff8a65,#b39ddb,#4fc3f7"
data-rain-size="18-42"
data-rain-density="5"

爱心图标雨

data-rain-icons="fa-solid fa-heart,fa-solid fa-heart"
data-rain-colors="#ff6b6b,#ff4757,#ff7979,#e84393"
data-rain-size="16-36"

中文词组雨

data-rain-text="平安,喜乐,好运,发财,幸福,如意"
data-rain-colors="#ff8a65,#ffd93d,#ff6b6b,#e17055"
data-rain-font="KaiTi, STKaiti, serif"

细密小雨 (直落、无晃动)

data-rain-text="."
data-rain-colors="#e6edf3,#c9d1d9,#8b949e"
data-rain-size="8-20"
data-rain-speed="3.5"
data-rain-density="10"
data-rain-direction="90"
data-rain-wobble="false"

全混搭 (文字 + FA + SVG)

data-rain-text="Rain"
data-rain-icons="fa-solid fa-star,fa-solid fa-heart"
data-rain-svgs="
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='currentColor'/></svg>
<svg viewBox='0 0 24 24'><polygon points='12,2 15,9 22,9 16,14 18,22 12,17 6,22 8,14 2,9 9,9' fill='currentColor'/></svg>"
data-rain-colors="#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#ff8a65,#b39ddb,#4fc3f7"

大字慢落

data-rain-text="雨"
data-rain-colors="#4fc3f7,#4d96ff,#6bcb77"
data-rain-size="36-64"
data-rain-speed="1"
data-rain-density="1.5"
data-rain-font="serif"

SVG 几何

data-rain-svgs="
<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='currentColor'/></svg>
<svg viewBox='0 0 24 24'><polygon points='12,2 22,22 2,22' fill='currentColor'/></svg>
<svg viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='3' fill='currentColor'/></svg>"
data-rain-colors="#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#ff8a65,#b39ddb,#4fc3f7"
data-rain-size="20-48"

Rain CDN v1.0.0 | by Minecraft_goose | rain-cdn.goose.cc.cd