CSS 文本效果生成器

大多数 CSS 文本效果库都会为您提供固定的预设：一种霓虹灯发光，一种 3D 挤压，接受或保留它。该生成器根据您的参数构建 CSS，而不是根据您实际键入的文本。从效果选择中选择霓虹灯发光、3D 挤出、凸版印刷/浮雕、轮廓或渐变填充，调整该效果自己的控件，实时预览以及其下方的可复制 CSS 块会在每次更改时更新。

3D 拉伸效果是值得理解的：对于选定的深度（堆叠层数）和角度，层 i 水平偏移 i × cos(angle)，垂直偏移 i × sin(angle)，在 JavaScript 中使用真正的三角函数计算 - 不是从预设角度的查找表中读取。在 45 度时，每层的水平和垂直偏移都相等，因为 45 度的余弦和正弦是相同的值；旋转角度滑块，观察整堆“文本阴影”层实时围绕字母摆动，每个层都比上一个更暗一点，以伪造发光的 3D 脸部。

霓虹灯发光堆叠四个“文本阴影”层，以您选择的颜色增加模糊半径，并具有可选的闪烁：将其打开，并生成具有随机不透明度下降序列的“@keyframes”规则并实时动画，并且随机播放按钮可让您重新滚动图案，而无需手动编写单个关键帧。轮廓文本适用于支持它的浏览器，并为不支持的浏览器应用诚实的 8 向“text-shadow”回退 - 这两行都在复制的 CSS 中提供，并附有说明原因的注释。渐变填充使用“background-clip: text”将“线性渐变”剪辑到文本形状，现在是具有广泛支持的标准属性，为旧版引擎保留较旧的“-webkit-”前缀行。

一切都在您的浏览器中本地呈现 - 您输入的任何文本都不会发送到任何地方。将完成的 CSS 块（包括效果需要时的“@keyframes”规则）直接复制到样式表中。