mcpField
D
duskmoon-art-elements

duskmoon-art-elements

github.com/gsmlg-dev设计与 UI035 次安装3 周前更新
代码仓库

关于 duskmoon-art-elements

面向 Web 开发者的 15 个 CSS 艺术自定义元素，可独立呈现动画，无需 JavaScript 逻辑或外部图片。元素可单独或整套安装，并支持通用尺寸和部分专属属性。

主要功能

  1. 0115 个动画 CSS 艺术元素
  2. 02无需 JavaScript 逻辑或外部图片
  3. 03可单独安装或整套安装
  4. 04支持小、中、大尺寸
  5. 05提供元素专属动画属性

适用场景

  1. 01为网页添加动画 CSS 艺术效果
  2. 02选用月亮、太阳或山脉元素
  3. 03调整降雪数量或动画状态
  4. 04仅注册所需元素以便摇树优化

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gsmlg-dev/code-agent --skill duskmoon-art-elements

安装后在 Claude Code 中输入/duskmoon-art-elements确认已加载。

附带文件references/css-art-catalog.md

详细介绍

DuskMoon CSS 艺术元素

基于 @duskmoon-dev/el-base 构建的 15 个纯 CSS 艺术自定义元素。每个元素都会渲染一个独立的 CSS 动画——无需 JavaScript 逻辑，也无需外部图片。

安装

# Individual art element
bun add @duskmoon-dev/el-art-atom

# All art elements at once
bun add @duskmoon-dev/art-elements

注册

// Option 1: Explicit (tree-shakable)
import { register } from '@duskmoon-dev/el-art-atom';
register();

// Option 2: Side-effect auto-register
import '@duskmoon-dev/el-art-atom/register';

// Option 3: Register all CSS art elements
import { registerAllArts } from '@duskmoon-dev/art-elements';
registerAllArts();

在 HTML 中使用

<el-dm-art-atom></el-dm-art-atom>
<el-dm-art-atom size="lg"></el-dm-art-atom>

<el-dm-art-moon variant="crescent" glow></el-dm-art-moon>
<el-dm-art-sun variant="sunset" rays></el-dm-art-sun>

<el-dm-art-plasma-ball size="xl"></el-dm-art-plasma-ball>
<el-dm-art-synthwave-starfield size="lg" paused></el-dm-art-synthwave-starfield>

<el-dm-art-gemini-input placeholder="Ask me anything..."></el-dm-art-gemini-input>
<el-dm-art-gemini-input size="lg"></el-dm-art-gemini-input>

属性

所有 CSS 艺术元素默认均为 display: inline-block。大多数元素都支持 size：

属性类型默认值描述
sizeString'md'尺寸变体——映射到 art-{name}-{size} CSS 类（sm、md、lg）

元素专属属性：

元素额外属性
el-dm-art-moonvariant（String）、glow（Boolean）
el-dm-art-mountainvariant（String）
el-dm-art-sunvariant（String）、rays（Boolean）
el-dm-art-snowcount（Number）、unicode（Boolean）、fall（Boolean）
el-dm-art-circular-gallerytitle（String）、count（Number）
el-dm-art-synthwave-starfieldpaused（Boolean）
el-dm-art-gemini-inputplaceholder（String）

剥离 CSS 层

CSS 艺术元素从 @duskmoon-dev/css-art 导入原始 CSS，并在注入 Shadow DOM 前剥离 @layer css-art { ... } 包装层：

import rawCss from '@duskmoon-dev/css-art/dist/art/{name}.css' with { type: 'text' };
const layerMatch = rawCss.match(/@layer\s+css-art\s*\{([\s\S]*)\}\s*$/);
const coreCss = layerMatch ? layerMatch[1] : rawCss;

这是必需的，因为 Shadow DOM 内的 @layer 不会与文档的层级顺序交互。

一些艺术元素（例如 gemini-input）还在层外声明了 @property——这些声明位于 @layer 块之前，不会被剥离正则表达式匹配，因此会予以保留。

参考资料

评论

支持 Markdown