THYUU/星度主题 全局通用引入样式列表（测试）

文档内容为 THYUU/星度主题测试使用，所含类名并非正式

动画类

通用动画

CSS 类名 / HTML 结构	含义	涉及的 CSS 函数	备注
.fade-before	定义元素前置动画样式，已存在默认动画样式，但可通过 CSS 函数定义	1. transform：--trfm 变换前 --trfm-in 变换后 --trfm-or 方向 2. filter：--filter 初始滤镜 3. opacity：--opci 变换前 --opci-in 变换后
.fade-after	定义元素后置动画样式，该类名由 JS 生成，取消前置默认动画样式

图片加载动画

CSS 类名 / HTML 结构	含义	备注
.loaded	定义元素加载后动画样式，该类名由 JS 生成，取消前置默认动画样式

按钮类

通用按钮

CSS 类名 / HTML 结构	含义	备注
.button	定义通用按钮，效果与 <button> 定义一致	可对任何元素使用 class 引入样式，例如 a 标签
追加 .prev	定义通用按钮具有向左图标	通常用于同页上一页导航
追加 .next 或 .into	定义通用按钮具有向右图标	.next 通常用于同页下一页导航 .into 通常用于当前页进入新页
追加 .close	定义通用按钮具有向下图标	通常用于关闭当前弹出页
追加 .has-btn-effect	定义按钮含有动画效果	还需对子元素加上 <span class="btn-meta"> 实现文字隐藏出现效果
追加 .has-thyuu-color	定义按钮含有主题颜色

单向弹窗按钮

HTML 结构	CSS 类名	含义	备注
<input hidden type="checkbox" id="自定义 id" class="dialog-check">	.dialog-check	定义检查元素	建议在 class 使用 is-* 格式来单独定义
<label for="自定义 id" class="dialog-btn" role="button"></label>	.dialog-btn	定义弹窗按钮	可选在 class 追加 .button 引入通用按钮样式
随意 HTML 区块格式初添加 class="dialog-area"	.dialog-area	定义弹窗区域	对该元素实现显示/隐藏切换

双向切换按钮

HTML 结构	CSS 类名	含义	备注
<input hidden type="checkbox" id="自定义 id" class="toggle-check">	.toggle-check	定义检查元素 input type="checkbox"	建议在 class 使用 is-* 格式来单独定义
<label for="自定义 id" class="toggle-btn" role="button"></label>	.toggle-btn	定义切换按钮	必须增加两个 <i> 子元素标题，实现双向切换，已固定样式
随意 HTML 区块格式初添加 class="toggle-area"	.toggle-area	定义切换区域	对前两个子元素实现双向切换

区块类

CSS 类名	含义	备注
.thyuu-updiv	定义 fancybox 标准弹窗样式	对任何元素使用 id="自定义 id" 定义弹出窗口，使用 data-fancybox="div" 和 href="自定义 id" 激活按钮
.thyuu-uptip	定义 fancybox 简易弹窗样式	对任何元素使用 id="自定义 id" 定义弹出窗口，使用 data-fancybox="tip" 和 href="自定义 id" 激活按钮
.thyuu-uppop	定义浏览器原生弹出窗口样式
.thyuu-noone	定义无任何元素提示区块样式
.thyuu-block	定义区块元素样式
.thyuu-video	定义视频元素样式
.thyuu-music	定义音频元素样式
.thyuu-icon	定义元素引入图标	定义图标不受浏览器字体合成影响，对后续文字保留间距，需 class 包括图标类名 icon- 时生效

辅助类

CSS 类名 / HTML 结构	含义	涉及的 CSS 函数	备注
.blur	定义元素样式为 backdrop-filter: blur(20px)
.blur-saturate	定义元素样式为 backdrop-filter: saturate(1.8) blur(20px)
.no-scrollbar	定义元素隐藏滚动条
.has-line-clamp	定义元素多行隐藏	--line-num 定义行数	默认值 1 行