自定义样式

弹幕在任何地方都支持使用 CSS 代码来自定义其外观。

预览

在下方的编辑器中输入 CSS 代码，实时预览效果。预设的 CSS 代码可以直接复制到扩展中。

自定义 CSS

如何使用

打开扩展的 弹幕设置 页面
开启 使用自定义 CSS 开关
在文本框中输入你的 CSS 代码

技术规范

基础类名

以下类名存在于所有弹幕元素上：

类名	描述
`.da-danmaku`	所有弹幕的基础类。
`.da-danmaku-text-shadow`	默认的文字描边样式。

每个弹幕元素还会拥有以下列表中的一个类名：

类名	描述
`.da-danmaku-rtl`	普通滚动弹幕（从右向左）。
`.da-danmaku-ltr`	逆向滚动弹幕（从左向右）。
`.da-danmaku-top`	顶部固定弹幕。
`.da-danmaku-bottom`	底部固定弹幕。

CSS 变量

变量名	描述	示例
`--color`	弹幕原本的颜色	`#ffffff`

数据属性

属性	描述	示例
`data-text`	弹幕的完整文本内容	`data-text="2333"`

示例代码

柔和阴影

.da-danmaku {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.4);
}

荧光效果

利用 text-shadow 和 --color 变量制作发光效果：

.da-danmaku {
  text-shadow: 0 0 5px var(--color), 0 0 10px var(--color),
    0 0 20px var(--color);
}

故障风

仅作示例，实际使用可能导致卡顿。

.da-danmaku::before,
.da-danmaku::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a;
}

.da-danmaku::before {
  left: 2px;
  text-shadow: -1px 0 #ff00c1;
  clip-path: inset(44% 0 61% 0);
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.da-danmaku::after {
  left: -2px;
  text-shadow: -1px 0 #00fff9;
  clip-path: inset(58% 0 43% 0);
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(20% 0 80% 0);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
  }
  40% {
    clip-path: inset(40% 0 50% 0);
  }
  60% {
    clip-path: inset(80% 0 5% 0);
  }
  80% {
    clip-path: inset(10% 0 70% 0);
  }
  100% {
    clip-path: inset(30% 0 20% 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(10% 0 60% 0);
  }
  20% {
    clip-path: inset(30% 0 30% 0);
  }
  40% {
    clip-path: inset(70% 0 20% 0);
  }
  60% {
    clip-path: inset(20% 0 10% 0);
  }
  80% {
    clip-path: inset(50% 0 40% 0);
  }
  100% {
    clip-path: inset(0% 0 80% 0);
  }
}