文档内容为 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 生成,取消前置默认动画样式
使用了浏览器自带的懒加载 API。

按钮类

通用按钮

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定义弹窗区域对该元素实现显示/隐藏切换
弹窗切换按钮是根据 input type="checkbox" 使用浏览器 input:checked 依靠纯 CSS 来实现显示/隐藏切换,它要求按钮和区域关系为相邻。没有使用任何 JS,可用作简单切换。THYUU/星度主题提供 CSS 样式定制,在 HTML 引入类名和结构即可实现。

双向切换按钮

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定义切换区域对前两个子元素实现双向切换
双向切换按钮和单向弹窗按钮的 HTML 结构大致相同,只是 CSS 样式处理方式不同而已,单向弹窗按钮注重对同一元素实现显示/隐藏,双向切换按钮注重对两个元素实现切换显示/隐藏。

区块类

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 行