用途:DuskMoon CSS Art Elements 是一组基于 @duskmoon-dev/el-base 构建的纯 CSS 艺术自定义元素,共 15 个,用于在网页中加入自包含的 CSS 动画,不依赖 JavaScript 逻辑,也不依赖外部图片。
安装:单个艺术元素可用 bun add @duskmoon-dev/el-art-atom,一次性安装全部元素可用 bun add @duskmoon-dev/art-elements。
注册:有三种方式。显式注册(可 tree-shaking):import { register } from '@duskmoon-dev/el-art-atom'; register(); 副作用自动注册:import '@duskmoon-dev/el-art-atom/register'; 注册全部: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>。
属性:所有 CSS 艺术元素默认 display: inline-block。多数支持 size(String,默认 'md',映射为 art-{name}-{size} CSS 类,如 sm、md、lg)。元素特有属性:el-dm-art-moon 支持 variant(String)与 glow(Boolean);el-dm-art-mountain 支持 variant(String);el-dm-art-sun 支持 variant(String)与 rays(Boolean);el-dm-art-snow 支持 count(Number)、unicode(Boolean)、fall(Boolean);el-dm-art-circular-gallery 支持 title(String)与 count(Number);el-dm-art-synthwave-starfield 支持 paused(Boolean);el-dm-art-gemini-input 支持 placeholder(String)。
CSS Layer 剥离:这些元素从 @duskmoon-dev/css-art 导入原始 CSS,并在注入 Shadow DOM 前剥离 @layer css-art { ... } 包裹,因为 Shadow DOM 内的 @layer 不会与文档的 layer 顺序交互。资料给出了对应代码片段:import rawCss from '@duskmoon-dev/css-art/dist/art/{name}.css' with { type: 'text' }; 随后用正则匹配 @layer 并取其中内容。部分作品(如 gemini-input)在 layer 之外还有 @property 声明,这些声明位于 @layer 块之前,因此不会被剥离正则匹配,从而得以保留。
适用场景:为网页添加纯 CSS 艺术动画,如原子、月亮、太阳、等离子球、山脉、雪、环形画廊、合成波星空、gemini 输入框等,适合无需 JavaScript 与图片资源的轻量动效展示。
限制:资料未提供浏览器兼容性、性能、许可协议、具体视觉效果细节或所有 15 个元素的完整清单;这些方面暂未提供。CSS Layer 剥离在 Shadow DOM 中为必需步骤,否则 layer 顺序不生效。