简要介绍如何构建自适应、易于访问的颜色自适应 <button>
组件。
在这篇博文中,我想分享一下如何构建颜色自适应
自适应且易于使用的 <button>
元素。
试用演示并查看
来源
如果你更喜欢视频,可以参阅此博文的 YouTube 版本:
概览
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
通过
<button>
是针对用户互动而构建的其 click
事件通过键盘触发,
鼠标、触摸、语音等操作,还能对设备进行智能规则
时间。此外,
并且每个浏览器中都添加了一些默认样式
任何自定义。使用 color-scheme
选择启用
添加到由浏览器提供的浅色和深色按钮中。
此外还有不同类型的
按钮,
前面的 Codepen 嵌入代码中显示的每个 ID。没有类型的<button>
改为在 <form>
内,更改为提交类型。
<!-- buttons -->
<button></button>
<button type="submit"></button>
<button type="button"></button>
<button type="reset"></button>
<!-- button state -->
<button disabled></button>
<!-- input buttons -->
<input type="button" />
<input type="file">
在本月的统一发票挑战中, 每个按钮都有相应的样式,有助于从视觉上区分用户意图。重置 按钮 会显示警告颜色,因为它们具有破坏性,请提交 按钮 将会显示蓝色的重音文字,因此其宣传力度会略高于常规 按钮。
<ph type="x-smartling-placeholder">![最终所有按钮类型的预览(以表单形式显示,而非以表单形式显示),并且为图标按钮和自定义按钮添加了一些不错的内容。](https://web.developers.google.cn/static/articles/building/a-button-component/image/preview-the-final-set-a-f0edd66ff9463.png?authuser=9&hl=lt)
按钮也具有伪类
供 CSS 用于样式设置。这些类提供了用于自定义
按钮感觉::hover
将鼠标指针悬停在该按钮上时
:active
表示点击鼠标
或键盘按键时
:focus
或
:focus-visible
用于辅助设置辅助技术样式
button:hover {}
button:active {}
button:focus {}
button:focus-visible {}
![深色主题中最终所有按钮类型的预览。](https://web.developers.google.cn/static/articles/building/a-button-component/image/preview-the-final-set-a-65448775506f6.png?authuser=9&hl=lt)
Markup
除了 HTML 规范提供的按钮类型外,我还添加了
按钮(带有图标)和自定义类 btn-custom
的按钮。
<button>Default</button>
<input type="button" value="<input>"/>
<button>
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<path d="..." />
</svg>
Icon
</button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom">Custom</button>
<input type="file">
然后,为了进行测试,将每个按钮放置在表单内。这样,我就可以确保 默认按钮的样式进行了相应更新,默认按钮的行为类似于 提交按钮。我还将图标策略从内嵌 SVG 切换为蒙版 SVG 以确保它们效果一样好
<form>
<button>Default</button>
<input type="button" value="<input>"/>
<button>Icon <span data-icon="cloud"></span></button>
<button type="submit">Submit</button>
<button type="button">Type Button</button>
<button type="reset">Reset</button>
<button disabled>Disabled</button>
<button class="btn-custom btn-large" type="button">Large Custom</button>
<input type="file">
</form>
此时,组合矩阵会非常庞大。“介于”按钮 有超过 20 种, 按钮组合。CSS 有助于我们清晰阐明 就是这么简单!
无障碍
按钮元素使用起来自然是易于访问的,但一些常见的 增强功能。
一起悬停和聚焦
我喜欢将 :hover
和 :focus
与 :is()
功能组合在一起
伪选择器。这有助于确保我的界面始终考虑使用键盘
和辅助技术样式
button:is(:hover, :focus) {
…
}
互动对焦环
我喜欢为键盘和辅助技术用户添加动画焦点环。我 为此,只需以动画形式呈现按钮距离按钮 5 像素 。这样就能让对焦圈形成一种环状效果 按下时缩小为按钮大小。
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
确保传递色彩对比度
至少有四种不同的浅色组合 需要考虑颜色对比度:按钮、提交按钮、重置按钮以及 “已停用”按钮。此处使用 VisBug 执行以下操作: 检查并显示所有分数:
向看不见的人隐藏图标
创建图标按钮时,图标应以视觉方式支持 按钮文字。这也意味着,该图标对于有视力的人而言没有价值 损失。幸运的是,浏览器提供了一种在屏幕阅读器中隐藏项目的方法 让视力障碍人士无需关注装饰性按钮 图片:
<button>
<svg … aria-hidden="true">...</svg>
Icon Button
</button>
![显示该按钮的无障碍功能树的 Chrome 开发者工具。该树会忽略按钮图片,因为它已将 aria-hidden 设置为 true。](https://web.developers.google.cn/static/articles/building/a-button-component/image/chrome-devtools-showing-4f9517c567e4c.png?authuser=9&hl=lt)
样式
在下一部分,我首先要建立一个用于管理 按钮的自适应样式。利用这些自定义属性 选择元素并自定义其外观。
自适应自定义媒体资源策略
此 GUI 挑战中使用的自定义属性策略与 构建配色方案时使用的工具。对于 自适应浅色和深色系统,每个主题的自定义属性是 并相应地定义和命名然后使用一个自定义属性来存储 并分配给 CSS 属性。之后的单曲 自定义属性可以更新为其他值,然后更新按钮 样式。
button {
--_bg-light: white;
--_bg-dark: black;
--_bg: var(--_bg-light);
background-color: var(--_bg);
}
@media (prefers-color-scheme: dark) {
button {
--_bg: var(--_bg-dark);
}
}
我喜欢浅色和深色主题,它们具有清晰的声明性。通过
间接处理和抽象化分流到 --_bg
自定义属性中,
这是目前唯一被动属性;--_bg-light
和--_bg-dark
静态。此外,很明显,浅色主题是默认主题,
仅在有条件地应用深色主题。
为确保设计的一致性做好准备
共享选择器
以下选择器用于定位所有不同类型的按钮,
一开始有点让人应接不暇。:where()
为
因此自定义此按钮无需特别指定。按钮通常是
并已针对替代场景进行调整,并且 :where()
选择器可确保
非常简单。在 :where()
内,系统会选择每种按钮类型,包括
::file-selector-button
,不能
已使用
在 :is()
或 :where()
内。
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
…
}
所有自定义属性的范围都将限定在此选择器中。审核用时 所有自定义属性!本例中使用了许多自定义属性 按钮。我会逐一描述各个群体 然后分享它们的不足之处 运动上下文。
按钮强调色
提交按钮和图标是增添色彩的好地方:
--_accent-light: hsl(210 100% 40%);
--_accent-dark: hsl(210 50% 70%);
--_accent: var(--_accent-light);
按钮文字颜色
按钮文字颜色不是白色或黑色,而是调暗或调亮的版本
的 --_accent
hsl()
和
仍然使用色调210
:
--_text-light: hsl(210 10% 30%);
--_text-dark: hsl(210 5% 95%);
--_text: var(--_text-light);
按钮背景色
除浅色主题外,按钮背景遵循相同的 hsl()
模式
这些按钮设为白色,这样它们的表面就会靠近
用户或在其他平台的前面:
--_bg-light: hsl(0 0% 100%);
--_bg-dark: hsl(210 9% 31%);
--_bg: var(--_bg-light);
按钮背景井
此背景颜色用于让某个表面显示在其他表面之后, 适用于文件输入的背景:
--_input-well-light: hsl(210 16% 87%);
--_input-well-dark: hsl(204 10% 10%);
--_input-well: var(--_input-well-light);
按钮内边距
按钮文本周围的间距是使用
ch
单位,相对于字体大小。大型语言模型
按钮只能使 font-size
增大,按钮缩放
:
--_padding-inline: 1.75ch;
--_padding-block: .75ch;
按钮边框
按钮边框半径存储在自定义属性中,这样文件输入 与其他按钮保持一致。边框颜色采用既定的自适应颜色 系统:
--_border-radius: .5ch;
--_border-light: hsl(210 14% 89%);
--_border-dark: var(--_bg-dark);
--_border: var(--_border-light);
按钮悬停突出显示效果
这些属性确立了在互动时过渡尺寸的尺寸属性;
突出显示颜色遵循自适应颜色系统。我们将介绍
但这些互动最终会用于box-shadow
效果:
--_highlight-size: 0;
--_highlight-light: hsl(210 10% 71% / 25%);
--_highlight-dark: hsl(210 10% 5% / 25%);
--_highlight: var(--_highlight-light);
按钮文字阴影
每个按钮都有细微的文字阴影样式。这有助于文本 使内容更加清晰可辨,并为演示文稿润色。
--_ink-shadow-light: 0 1px 0 var(--_border-light);
--_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%);
--_ink-shadow: var(--_ink-shadow-light);
按钮图标
根据相对长度的 ch
单位,图标大小为 2 个字符
这将有助于图标根据按钮文字按比例缩放。通过
图标颜色依赖于 --_accent-color
,以实现自适应和主题内
color 决定。
--_icon-size: 2ch;
--_icon-color: var(--_accent);
按钮阴影
要使阴影正确适应明暗变化,它们需要 颜色和不透明度。浅色主题阴影在柔和且色调柔和时效果最佳 接近它们叠加的表面颜色。深色主题的阴影颜色需要设置得更深, 饱和度更高,因此可以叠加更深的表面颜色。
--_shadow-color-light: 220 3% 15%;
--_shadow-color-dark: 220 40% 2%;
--_shadow-color: var(--_shadow-color-light);
--_shadow-strength-light: 1%;
--_shadow-strength-dark: 25%;
--_shadow-strength: var(--_shadow-strength-light);
通过自适应颜色和强度,我可以组合出两种阴影深度:
--_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%));
--_shadow-2:
0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)),
0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%));
此外,为了让按钮具有略微 3D 的外观,您可以使用 1px
方框阴影
营造出一种错觉:
--_shadow-depth-light: 0 1px var(--_border-light);
--_shadow-depth-dark: 0 1px var(--_bg-dark);
--_shadow-depth: var(--_shadow-depth-light);
按钮转换
按照自适应颜色的模式,我创建了两个静态属性 拥有设计系统选项:
--_transition-motion-reduce: ;
--_transition-motion-ok:
box-shadow 145ms ease,
outline-offset 145ms ease
;
--_transition: var(--_transition-motion-reduce);
选择器中同时涵盖所有房源
:where( button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"] ), :where(input[type="file"])::file-selector-button { --_accent-light: hsl(210 100% 40%); --_accent-dark: hsl(210 50% 70%); --_accent: var(--_accent-light);--_text-light: hsl(210 10% 30%); --_text-dark: hsl(210 5% 95%); --_text: var(--_text-light);
--_bg-light: hsl(0 0% 100%); --_bg-dark: hsl(210 9% 31%); --_bg: var(--_bg-light);
--_input-well-light: hsl(210 16% 87%); --_input-well-dark: hsl(204 10% 10%); --_input-well: var(--_input-well-light);
--_padding-inline: 1.75ch; --_padding-block: .75ch;
--_border-radius: .5ch; --_border-light: hsl(210 14% 89%); --_border-dark: var(--_bg-dark); --_border: var(--_border-light);
--_highlight-size: 0; --_highlight-light: hsl(210 10% 71% / 25%); --_highlight-dark: hsl(210 10% 5% / 25%); --_highlight: var(--_highlight-light);
--_ink-shadow-light: 0 1px 0 hsl(210 14% 89%); --_ink-shadow-dark: 0 1px 0 hsl(210 11% 15%); --_ink-shadow: var(--_ink-shadow-light);
--_icon-size: 2ch; --_icon-color-light: var(--_accent-light); --_icon-color-dark: var(--_accent-dark); --_icon-color: var(--accent, var(--_icon-color-light));
--_shadow-color-light: 220 3% 15%; --_shadow-color-dark: 220 40% 2%; --_shadow-color: var(--_shadow-color-light); --_shadow-strength-light: 1%; --_shadow-strength-dark: 25%; --_shadow-strength: var(--_shadow-strength-light); --_shadow-1: 0 1px 2px -1px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 9%)); --_shadow-2: 0 3px 5px -2px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--_shadow-color)/calc(var(--_shadow-strength) + 5%)) ;
--_shadow-depth-light: hsl(210 14% 89%); --_shadow-depth-dark: var(--_bg-dark); --_shadow-depth: var(--_shadow-depth-light);
--_transition-motion-reduce: ; --_transition-motion-ok: box-shadow 145ms ease, outline-offset 145ms ease ; --_transition: var(--_transition-motion-reduce); }
深色主题自适应
在以下情况下,-light
和 -dark
静态属性模式的值会变得清晰:
深色主题属性:
@media (prefers-color-scheme: dark) {
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
--_bg: var(--_bg-dark);
--_text: var(--_text-dark);
--_border: var(--_border-dark);
--_accent: var(--_accent-dark);
--_highlight: var(--_highlight-dark);
--_input-well: var(--_input-well-dark);
--_ink-shadow: var(--_ink-shadow-dark);
--_shadow-depth: var(--_shadow-depth-dark);
--_shadow-color: var(--_shadow-color-dark);
--_shadow-strength: var(--_shadow-strength-dark);
}
}
这不仅具有不错的效果,而且这些自定义按钮的消费者可以使用 并确信它们会根据用户偏好做出适当的调整。
减少动作自适应
如果该访问者允许移动,请将 --_transition
分配给
var(--_transition-motion-ok)
:
@media (prefers-reduced-motion: no-preference) {
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
--_transition: var(--_transition-motion-ok);
}
}
一些共享样式
按钮和输入源需要将其字体设置为 inherit
,以便与
其余的网页字体否则,它们将由浏览器设置样式。这也
适用于 letter-spacing
。将 line-height
设置为 1.5
可设置信箱模式
大小,在文字的上方和下方留出一定空间:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
/* …CSS variables */
font: inherit;
letter-spacing: inherit;
line-height: 1.5;
border-radius: var(--_border-radius);
}
设置按钮样式
选择器调整
选择器 input[type="file"]
不是输入的按钮部分,
::file-selector-button
作为伪元素,因此我删除了 input[type="file"]
列表中:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]
),
:where(input[type="file"])::file-selector-button {
}
光标和触摸调整
首先,我将光标样式设置为 pointer
样式,这有助于按钮指示
让用户知道它具有互动性然后将 touch-action: manipulation
添加到
使点击无需等待,并观察到潜在的双击操作,使得
使用起来更加快捷:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
cursor: pointer;
touch-action: manipulation;
}
颜色和边框
接下来,我使用 之前建立的自适应自定义属性:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
font-size: var(--_size, 1rem);
font-weight: 700;
background: var(--_bg);
color: var(--_text);
border: 2px solid var(--_border);
}
阴影
这些按钮运用了一些很棒的技术。通过
text-shadow
为
能够适应明暗变化,呈现出令人赏心悦目的微妙外观
放置在背景上。对于
box-shadow
、
系统指定了三种阴影第一个,--_shadow-2
是常规的方框阴影。
第二个阴影是以诱导眼球的方式,使按钮看起来像是
斜了一点。最后一个阴影是悬停突出显示,最初为
尺寸为 0,但在稍后会提供一个尺寸,并会进行转换,这样它就会
扩展应用
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
box-shadow:
var(--_shadow-2),
var(--_shadow-depth),
0 0 0 var(--_highlight-size) var(--_highlight)
;
text-shadow: var(--_ink-shadow);
}
布局
我为按钮设置了flexbox布局
具体而言,就是一个适合其内容的 inline-flex
布局。然后居中
以及将子元素垂直和水平对齐,
center。这有助于图标和其他
按钮元素正确对齐。
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
}
间距
对于按钮间距,我使用了
gap
(用于保留同级)
从触觉和逻辑
内边距属性
间距适用于所有文本布局。
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
gap: 1ch;
padding-block: var(--_padding-block);
padding-inline: var(--_padding-inline);
}
触控和鼠标用户体验
下一部分主要针对移动设备上的触控用户。第一个
媒体资源
user-select
、
面向所有用户提供;它可防止文本突出显示按钮文本。这主要是
用户点按并按住按钮和操作按钮时,
系统会突出显示按钮文字。
我通常发现,与内置按钮的用户体验不符
所以我将 user-select
设为 none 来停用它。点按突出显示颜色
(-webkit-tap-highlight-color
个)
和操作系统上下文菜单
(-webkit-touch-callout
)
是其他以网络为中心的按钮功能,
所以我也去掉了它们
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
转场效果
系统会将自适应 --_transition
变量分配给
transition 属性:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
),
:where(input[type="file"])::file-selector-button {
…
transition: var(--_transition);
}
悬停鼠标时,当用户未主动按压时,调整阴影突出显示效果 使其具有很棒的聚焦外观,看起来像是从 按钮:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
):where(:not(:active):hover) {
--_highlight-size: .5rem;
}
获得焦点后,增加焦点轮廓相对于按钮的偏移量,同时赋予其 按钮内看起来逐渐变大的精美焦点外观:
:where(button, input):where(:not(:active)):focus-visible {
outline-offset: 5px;
}
图标
为处理图标,该选择器添加了适用于直接 SVG 的 :where()
选择器
具有自定义属性 data-icon
的子元素或元素。图标大小已设置
自定义属性。描边颜色
以及
drop-shadow
与 text-shadow
相匹配。flex-shrink
设置为 0
,因此该图标从不
都被压扁了最后,选择带线的图标
fill: none
和 round
行帽和行联接:
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
) > :where(svg, [data-icon]) {
block-size: var(--_icon-size);
inline-size: var(--_icon-size);
stroke: var(--_icon-color);
filter: drop-shadow(var(--_ink-shadow));
flex-shrink: 0;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
自定义提交按钮
我希望提交按钮的外观略有提升 方法是将按钮的文字颜色设为强调色:
:where(
[type="submit"],
form button:not([type],[disabled])
) {
--_text: var(--_accent);
}
自定义重置按钮
我希望重置按钮上有一些内置警告标志,以提醒用户 潜在的破坏行为。我还选择了为浅色主题设置样式 按钮的红色强调比深色主题更多。自定义设置是通过 更改相应的浅色或深色底色后,按钮就会 更新样式:
:where([type="reset"]) {
--_border-light: hsl(0 100% 83%);
--_highlight-light: hsl(0 100% 89% / 20%);
--_text-light: hsl(0 80% 50%);
--_text-dark: hsl(0 100% 89%);
}
我也觉得焦点轮廓颜色最好能与
红色。文本颜色会将深红色调整为浅红色。我设置轮廓颜色
将此与关键字匹配
currentColor
:
:where([type="reset"]):focus-visible {
outline-color: currentColor;
}
自定义已停用的按钮
在 尝试收服已停用的按钮,使之显得不太那么活跃。我测试了 调整 HSL 亮度值,并确保这些值通过了 得分。
:where(
button,
input[type="button"],
input[type="submit"],
input[type="reset"]
)[disabled] {
--_bg: none;
--_text-light: hsl(210 7% 40%);
--_text-dark: hsl(210 11% 71%);
cursor: not-allowed;
box-shadow: var(--_shadow-1);
}
自定义文件输入按钮
文件输入按钮是 span 和按钮的容器。CSS 能够
稍微调整输入容器和嵌套按钮的样式,
。为容器指定 max-inline-size
,使其大小不会超过
,而 inline-size: 100%
将允许自身收缩和调整
容器大小背景颜色已设为自适应颜色
该颜色比其他表面颜色更暗,因此它位于文件选择器按钮后面。
:where(input[type="file"]) {
inline-size: 100%;
max-inline-size: max-content;
background-color: var(--_input-well);
}
文件选择器按钮和输入类型按钮
appearance: none
,用于移除浏览器提供的
其他按钮样式所覆盖的
:where(input[type="button"]),
:where(input[type="file"])::file-selector-button {
appearance: none;
}
最后,向按钮的 inline-end
添加外边距,以推送 span 文本
以便腾出一些空间
:where(input[type="file"])::file-selector-button {
margin-inline-end: var(--_padding-inline);
}
特殊深色主题例外情况
我为主要操作按钮设置了更深的背景,以实现更高的对比度 让文字看起来更具宣传性。
@media (prefers-color-scheme: dark) {
:where(
[type="submit"],
[type="reset"],
[disabled],
form button:not([type="button"])
) {
--_bg: var(--_input-well);
}
}
创建变体
为了好玩,而且很实用,我选择展示如何创建一些 变体。其中一个变体非常生动,类似于主要按钮的常用频率 看看。另一个变体很大。最后一个变体具有填充渐变的图标。
鲜亮按钮
为了实现此按钮样式,我直接用蓝色覆盖了基本属性 颜色。这种方法既快速又轻松,但移除了自适应属性和外观, 无论是浅色主题还是深色主题背景都相同
.btn-custom {
--_bg: linear-gradient(hsl(228 94% 67%), hsl(228 81% 59%));
--_border: hsl(228 89% 63%);
--_text: hsl(228 89% 100%);
--_ink-shadow: 0 1px 0 hsl(228 57% 50%);
--_highlight: hsl(228 94% 67% / 20%);
}
大按钮
这种按钮样式是通过修改 --_size
自定义属性实现的。
内边距和其他空间元素相对于此尺寸,沿线缩放
与新尺寸成比例
.btn-large {
--_size: 1.5rem;
}
图标按钮
此图标效果与我们的按钮样式没有任何关系, 展示了如何仅通过几个 CSS 属性来实现这一目标,以及按钮 处理非内嵌 SVG 的图标。
[data-icon="cloud"] {
--icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center / contain no-repeat;
-webkit-mask: var(--icon-cloud);
mask: var(--icon-cloud);
background: linear-gradient(to bottom, var(--_accent-dark), var(--_accent-light));
}
总结
现在您已经知道我是怎么做到的了,您该怎么做 ‽ 🙂?
让我们一起采用多样化的方法,学习所有在 Web 上构建应用的方法。
创建演示,在 Twitter 微博上添加链接,然后我会添加 到下面的社区混剪部分!
社区混剪作品
此处尚无任何可显示的内容。
资源
- GitHub 上的源代码