Janitor
首页
Ctrl K
登录注册

EPHEMERIS | CSS 模板 [请求]

译自英语·

EPHEMERIS | CSS TEMPLATE [REQUEST]

16

16

by:@Ru1nous

我们能不能假装夜空中的飞机就像流星

──────── ✦ ────────

EPHEMERIS
夜空风格的 JanitorAI 个人主页模板 | 简介代码作者 @MONIE_

✦ 如何使用本指南 ✦

01 / 开始之前

快速开始

1 · 复制 全部内容 | 黄金版 | (GOOGLE DOCS)

2 · 用查找功能编辑(Ctrl/Cmd + F)。搜索本指南中的类名,例如 nx-title。

3 · 全选、复制,然后粘贴到你的 JanitorAI 的 About Me 框中。保存、刷新、在手机上查看。

──────── ✦ ────────

02 / 避免出错

五条规则

✦ 不要留空行。换行请使用 <br>。

✦ 仅使用直接图片链接。必须以 .png / .jpg / .gif 结尾。未使用的图片保持 src="",它们会自动隐藏。

✦ 只修改 引号内或 > 与 < 之间的文字< >。切勿删除引号、

,{ } 或 class=。✦ <style> 部分内不得出现注释或 * ~ 字符。JanitorAI 会在这些字符处截断样式表。

✦ JanitorAI 会删除 url()、@import、data: 图片、CSS 变量、<input>、<label>,以及 CSS 属性 scale: 和 rotate:。

· ─────── ✦ ─────── ·

03 / 搜索 → 替换

我想修改......

我的名字 → nx-title

欢迎语 → nx-kicker

我的角色图片 → nx-sona

我的月亮图片 → nx-moon-pic

滚动文字(两处副本都要改)→ nx-ticker-set

About Me 框 → nx-acc

About Me 图片(3 张)→ nx-portrait

规则 / FAQ → nx-rf · nx-rule

我的链接 → nx-fl

好友 → nx-friend

画廊(两组都要改)→ nx-gi

系列 → nx-cover

横幅 → nx-banner

音乐播放器 → nx-mp-trk

星星灯串 → nx-fairy · nx-fairyb

页面宠物 → nx-pet

署名 → nx-credit

──────── ✦ ────────

04 / 每个面板

各板块

关于我

拱形框架中有三张图片,每个框一张。每个框是一个 <details>:标题放在 <summary>,文字放在 <p>。请保留全部三个框。要添加一个就复制整个块。

✦ 规则 & FAQ — 两张图片卡片;悬停滑动,点击打开列表。规则是 nx-rule(标题在 <b>,原因在 <span>)。FAQ 问题为 <details>。

✦ 找到我 — 每个链接一行 nx-fl:符号在 <i>,名称在 <b>,说明在 <small>,链接在 href。

✦ 好友 — 每行一个 nx-friend(名称、说明、图片、链接)。可容纳四个;更多则滚动。

✦ 画廊 — 横向滚动条。有两组相同的组(nx-gset):两组中的每张图片都要改。

✦ 系列 — 每个系列都是一个 <details class="nx-cover"> ... </details> 块。要添加一个就复制整个块;切勿粘贴到块内部。

✦ 关于 · 规则 · 链接 · 好友 · 画廊 · 系列 ✦

· · · ✦ · · ·

05 / 小彩蛋

音乐播放器

主视觉区域底部的磨砂玻璃条。后退和前进按钮在 3 首曲目间切换(唱片图片、标题、艺术家和链接都会改变)。播放会打开该曲目的链接。

查找 nx-mp-trk → 三个块。修改 nx-mp-song、nx-mp-artist、<img src=""> 以及 nx-mp-btn 的 href。

YouTube 自动播放链接:https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID&autoplay=1
Spotify 会打开播放列表,但无法强制自动播放。

05B / 星星花环

星星灯串

两串层叠的闪烁星星花环从网站顶栏底部垂下,并带有摇曳的垂坠星星。滚动时它们保持原位,且从不阻挡点击。第一串是 nx-fairy(7 个均匀垂弧),上方更繁密的一串是 nx-fairyb(11 个不均匀垂弧)。

向上或向下移动 → 修改两条规则中的 top:56px(数字相同)。手机端在 CSS 末尾附近的 top:44px 的 @media (max-width:720px) 行中使用。

移除一串 → 删除代码最顶部其 <div class="nx-fairy..."> 块。只在你想要代码整洁时才删除对应的 CSS。

06 / 月亮

月亮

在 nx-moon-pic 中放入透明 PNG。它以 60 秒为周期循环:阴影滑出,图片翻转,阴影滑回。修改四条月亮规则中的 60s(保持相等);-12s 是起始点。如果它偏出中心,请修改 .nx-moon-pic 中的 inset:-19%。

07 / 配色

颜色 & 字体

颜色已写在每条规则中,因此用查找 & 替换即可重新配色所有内容。

#d9dce6 银色 #b9a6d6 紫色点缀 #5b5b66 灰色边框 #ececf0 正文文字

黄金版:使用黄金版模板,或将 #d9dce6 → #efddba 和 #b9a6d6 → #dfc277

字体:只有网站内置字体可用(不支持 @import)。用查找 & 替换来更换名称,可在此处找到受支持字体的列表 HERE。

──────── ✦ ────────

08 / 出现问题时

故障排除

♡ 页面没有样式 — 有 * ~ 或 /* */ 进入了 <style>,或删除了一个 }

♡ 图片缺失 — 链接不是直接的,或 src="" 为空

♡ 滚动文字 / 画廊跳动 — 两处副本不一致

♡ 播放器按钮无反应 — 缺少 name="nxmp",或两首曲目都有 open

♡ 折叠面板无法切换 — 某个 <details> 丢失了 name= 或 </details>

09 / 请友善

署名规则

✔ 可自由在自己的主页上使用和编辑。你可以删除署名行。

✦ ✦ ✦

EPHEMERIS · 有问题?给我发消息!



已创建 10月24日

已更新 10月25日

已发布 10月24日

  • 无限制
  • #css
  • #profilecss
  • #freecss
  • #ru1noustemplates
已允许代理

已发布聊天