duskmoon-dev-css-art

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@duskmoon-dev/css-art Skill

@duskmoon-dev/css-art 使用教程

Overview

概述

@duskmoon-dev/css-art

is a pure CSS art component library — decorative illustrations built entirely with CSS. No images, no SVGs, no JavaScript. Each art piece is a self-contained CSS class with customizable properties.

@duskmoon-dev/css-art

是一个纯CSS艺术组件库——完全用CSS构建的装饰性插画。无需图片、无需SVG、无需JavaScript。每个艺术作品都是一个独立的CSS类，支持自定义属性。

Installation

安装

bash

undefined

bash

undefined

Bun

bun add @duskmoon-dev/css-art

npm

npm install @duskmoon-dev/css-art

pnpm

pnpm add @duskmoon-dev/css-art

undefined

pnpm add @duskmoon-dev/css-art

undefined

Setup

配置

CSS Import

CSS导入

css

@import "@duskmoon-dev/css-art";

All art styles are wrapped in

@layer css-art { }

, so they won't conflict with

@duskmoon-dev/core

@layer components { }

css

@import "@duskmoon-dev/css-art";

所有艺术样式都包裹在

@layer css-art { }

中，因此不会与

@duskmoon-dev/core

的

@layer components { }

产生冲突。

Using with @duskmoon-dev/core

与@duskmoon-dev/core搭配使用

css

@import "tailwindcss";
@import "@duskmoon-dev/core";
@import "@duskmoon-dev/css-art";

css

@import "tailwindcss";
@import "@duskmoon-dev/core";
@import "@duskmoon-dev/css-art";

Available Art Components

可用艺术组件

Celestial

天体类

art-moon

— Moon with craters, crescent variant, and animated glow

Variants:
```
art-moon-crescent
```
,
```
art-moon-glow
```
Sizes:
```
art-moon-sm
```
(4rem), default (8rem),
```
art-moon-lg
```
(12rem),
```
art-moon-xl
```
(16rem)

Custom properties:

--art-moon-size

--art-moon-color

--art-moon-shadow

--art-moon-glow

```
art-sun
```
— Sun with radial gradient, spinning rays, and pulse animation
- Variants:
```
art-sun-rays
```
  ,
```
art-sun-sunset
```
  ,
```
art-sun-pulse
```
- Sizes:
```
art-sun-sm
```
  (4rem), default (8rem),
```
art-sun-lg
```
  (12rem),
```
art-sun-xl
```
  (16rem)
- Custom properties:
```
--art-sun-size
```
  ,
```
--art-sun-color
```
  ,
```
--art-sun-corona
```
  ,
```
--art-sun-glow
```
```
art-atom
```
— Animated atom with three orbiting electrons and pulsing nucleus
- Sizes:
```
art-atom-sm
```
  (180px), default (360px),
```
art-atom-lg
```
  (480px)
- Children:
```
.electron
```
  ,
```
.electron-alpha
```
  ,
```
.electron-omega
```
  — three electron orbits
- Custom properties:
```
--art-atom-size
```
  ,
```
--art-atom-color
```
  ,
```
--art-atom-electron-color
```
  ,
```
--art-atom-speed
```
```
art-eclipse
```
— Solar eclipse with six animated corona layers
- Sizes:
```
art-eclipse-sm
```
  (300px), default (600px),
```
art-eclipse-lg
```
  (800px)
- Children:
```
.layer.layer-1
```
  through
```
.layer.layer-6
```
  — six corona layers
- Custom properties:
```
--art-eclipse-size
```
  ,
```
--art-eclipse-bg
```

```
art-moon
```
— 带有陨石坑的月亮，包含新月变体和发光动画
- 变体：
```
art-moon-crescent
```
  ,
```
art-moon-glow
```
- 尺寸：
```
art-moon-sm
```
  （4rem）、默认（8rem）、
```
art-moon-lg
```
  （12rem）、
```
art-moon-xl
```
  （16rem）
- 自定义属性：
```
--art-moon-size
```
  ,
```
--art-moon-color
```
  ,
```
--art-moon-shadow
```
  ,
```
--art-moon-glow
```
```
art-sun
```
— 带有径向渐变、旋转光线和脉冲动画的太阳
- 变体：
```
art-sun-rays
```
  ,
```
art-sun-sunset
```
  ,
```
art-sun-pulse
```
- 尺寸：
```
art-sun-sm
```
  （4rem）、默认（8rem）、
```
art-sun-lg
```
  （12rem）、
```
art-sun-xl
```
  （16rem）
- 自定义属性：
```
--art-sun-size
```
  ,
```
--art-sun-color
```
  ,
```
--art-sun-corona
```
  ,
```
--art-sun-glow
```
```
art-atom
```
— 带有三个轨道电子和脉冲原子核的动画原子
- 尺寸：
```
art-atom-sm
```
  （180px）、默认（360px）、
```
art-atom-lg
```
  （480px）
- 子元素：
```
.electron
```
  ,
```
.electron-alpha
```
  ,
```
.electron-omega
```
  — 三个电子轨道
- 自定义属性：
```
--art-atom-size
```
  ,
```
--art-atom-color
```
  ,
```
--art-atom-electron-color
```
  ,
```
--art-atom-speed
```
```
art-eclipse
```
— 带有六层动画日冕的日食效果
- 尺寸：
```
art-eclipse-sm
```
  （300px）、默认（600px）、
```
art-eclipse-lg
```
  （800px）
- 子元素：
```
.layer.layer-1
```
  至
```
.layer.layer-6
```
  — 六层日冕
- 自定义属性：
```
--art-eclipse-size
```
  ,
```
--art-eclipse-bg
```

Landscape

风景类

```
art-mountain
```
— Mountain peak with snow cap, range variant with multiple peaks
- Variants:
```
art-mountain-range
```
  ,
```
art-mountain-sunset
```
  ,
```
art-mountain-forest
```
- Sizes:
```
art-mountain-sm
```
  (10rem×6rem), default (16rem×10rem),
```
art-mountain-lg
```
  (24rem×15rem)
- Children (range):
```
.art-peak
```
  — individual peaks within a range
- Custom properties:
```
--art-mountain-width
```
  ,
```
--art-mountain-height
```
  ,
```
--art-mountain-color
```
  ,
```
--art-mountain-shadow
```
  ,
```
--art-mountain-snow
```

```
art-mountain
```
— 带有雪顶的山峰，包含多峰山脉变体
- 变体：
```
art-mountain-range
```
  ,
```
art-mountain-sunset
```
  ,
```
art-mountain-forest
```
- 尺寸：
```
art-mountain-sm
```
  （10rem×6rem）、默认（16rem×10rem）、
```
art-mountain-lg
```
  （24rem×15rem）
- 子元素（山脉）：
```
.art-peak
```
  — 山脉中的单个山峰
- 自定义属性：
```
--art-mountain-width
```
  ,
```
--art-mountain-height
```
  ,
```
--art-mountain-color
```
  ,
```
--art-mountain-shadow
```
  ,
```
--art-mountain-snow
```

Weather

天气类

```
art-snowflake
```
— Snowflake dot with optional Unicode character variant
- Variants:
```
art-snowflake-unicode
```
  (❆ character),
```
art-snowflake-fall
```
  (falling animation)
- Custom properties:
```
--art-snowflake-size
```
  ,
```
--art-snowflake-color
```
  ,
```
--art-snowflake-duration
```

art-snowflake

— 雪花点，可选Unicode字符变体

变体：
```
art-snowflake-unicode
```
（❆字符）、
```
art-snowflake-fall
```
（下落动画）

自定义属性：

--art-snowflake-size

--art-snowflake-color

--art-snowflake-duration

Interactive

交互类

```
art-plasma-ball
```
— Interactive plasma ball with glass sphere, electrode, electric rays, and toggle switch
- Sizes:
```
art-plasma-ball-sm
```
  (200px), default (350px),
```
art-plasma-ball-lg
```
  (500px)
- Uses
```
input:checked
```
  CSS selectors for toggle behavior (no JS required)
- Children:
```
input.switcher
```
  ,
```
.glassball
```
  ,
```
.electrode
```
  ,
```
.rays
```
  ,
```
.ray
```
  ,
```
.base
```
  ,
```
.switch
```
- Custom properties:
```
--art-plasma-ball-size
```
  ,
```
--art-plasma-ball-base-color
```
```
art-circular-gallery
```
— CSS anchor-positioned circular gallery with 20 rotating card thumbnails
- Sizes:
```
art-circular-gallery-sm
```
  (400px), default (600px),
```
art-circular-gallery-lg
```
  (800px)
- Children:
```
h1
```
  (center title),
```
div
```
  elements (one per card) with
```
data-title
```
  attribute,
```
a > img
```
  (card thumbnail)
- Uses CSS
```
offset-path
```
  ,
```
position-anchor
```
  , and
```
:target
```
  for hover/selection behavior — no JS
- Custom properties:
```
--art-circular-gallery-size
```
  ,
```
--art-circular-gallery-radius
```
  ,
```
--art-circular-gallery-card-width
```

```
art-plasma-ball
```
— 交互式等离子球，包含玻璃球、电极、电子射线和切换开关
- 尺寸：
```
art-plasma-ball-sm
```
  （200px）、默认（350px）、
```
art-plasma-ball-lg
```
  （500px）
- 使用
```
input:checked
```
  CSS选择器实现切换行为（无需JS）
- 子元素：
```
input.switcher
```
  ,
```
.glassball
```
  ,
```
.electrode
```
  ,
```
.rays
```
  ,
```
.ray
```
  ,
```
.base
```
  ,
```
.switch
```
- 自定义属性：
```
--art-plasma-ball-size
```
  ,
```
--art-plasma-ball-base-color
```
```
art-circular-gallery
```
— 基于CSS锚点定位的圆形画廊，带有20个旋转卡片缩略图
- 尺寸：
```
art-circular-gallery-sm
```
  （400px）、默认（600px）、
```
art-circular-gallery-lg
```
  （800px）
- 子元素：
```
h1
```
  （中心标题）、带
```
data-title
```
  属性的
```
div
```
  元素（每个卡片一个）、
```
a > img
```
  （卡片缩略图）
- 使用CSS
```
offset-path
```
  ,
```
position-anchor
```
  和
```
:target
```
  实现悬停/选中行为——无需JS
- 自定义属性：
```
--art-circular-gallery-size
```
  ,
```
--art-circular-gallery-radius
```
  ,
```
--art-circular-gallery-card-width
```

Scenes

场景类

art-cat-stargazer

— A cat in a spacesuit gazing at the night sky with stars and a glowing moon

Sizes:

art-cat-stargazer-sm

(300px), default (500px),

art-cat-stargazer-lg

(700px)

Children:

.moon

.cat

.cat .bubble

.cat .backpack

.cat .tail

.cat .body

.cat .ear

.cat .head

Custom properties:
```
--art-cat-stargazer-size
```

art-flower-animation

— Blooming flowers with grass, light particles, and floating heart bubbles against a night sky

Sizes:

art-flower-animation-sm

(300px), default (600px),

art-flower-animation-lg

(900px)

Children:

.night

.flowers

.flower.flower--1

through

.flower--4

.bubbles

.bubble

Custom properties:

--art-flower-animation-size

--art-flower-animation-bg

```
art-cat-stargazer
```
— 穿着太空服的猫咪仰望夜空，带有星星和发光月亮
- 尺寸：
```
art-cat-stargazer-sm
```
  （300px）、默认（500px）、
```
art-cat-stargazer-lg
```
  （700px）
- 子元素：
```
.moon
```
  ,
```
.cat
```
  ,
```
.cat .bubble
```
  ,
```
.cat .backpack
```
  ,
```
.cat .tail
```
  ,
```
.cat .body
```
  ,
```
.cat .ear
```
  ,
```
.cat .head
```
- 自定义属性：
```
--art-cat-stargazer-size
```
```
art-flower-animation
```
— 绽放的花朵，搭配草地、光粒子和夜空背景下的漂浮心形气泡
- 尺寸：
```
art-flower-animation-sm
```
  （300px）、默认（600px）、
```
art-flower-animation-lg
```
  （900px）
- 子元素：
```
.night
```
  ,
```
.flowers
```
  ,
```
.flower.flower--1
```
  至
```
.flower--4
```
  ,
```
.bubbles
```
  ,
```
.bubble
```
- 自定义属性：
```
--art-flower-animation-size
```
  ,
```
--art-flower-animation-bg
```

Abstract / Generative

抽象/生成类

```
art-color-spin
```
— 3D spinning Olympic-style color rings with reflections and perspective
- Sizes:
```
art-color-spin-sm
```
  (385px), default (770px),
```
art-color-spin-lg
```
  (1000px)
- Children:
```
ul
```
  (required container),
```
ul > li
```
  × 4 (one per ring)
- Custom properties:
```
--art-color-spin-size
```
  ,
```
--art-color-spin-color1
```
  through
```
--art-color-spin-color4
```

art-synthwave-starfield

— Synthwave-aesthetic 3D starfield tunnel with neon grid walls and animated stars

Sizes:

art-synthwave-starfield-sm

(300px), default (600px),

art-synthwave-starfield-lg

(900px)

Modifier:
```
art-synthwave-starfield-paused
```
— pauses all animations

Children:

.art-synthwave-starfield-sides.art-synthwave-starfield-lefrig

.art-synthwave-starfield-sides.art-synthwave-starfield-topbot

.art-synthwave-starfield-stars

(×2)

Custom properties:

--art-synthwave-starfield-size

--art-synthwave-starfield-line-color

```
art-color-spin
```
— 3D旋转的奥运风格彩色环，带有反射和透视效果
- 尺寸：
```
art-color-spin-sm
```
  （385px）、默认（770px）、
```
art-color-spin-lg
```
  （1000px）
- 子元素：
```
ul
```
  （必填容器）、
```
ul > li
```
  ×4（每个环一个）
- 自定义属性：
```
--art-color-spin-size
```
  ,
```
--art-color-spin-color1
```
  至
```
--art-color-spin-color4
```

art-synthwave-starfield

— 合成波美学的3D星空隧道，带有霓虹网格墙和动画星星

尺寸：
```
art-synthwave-starfield-sm
```
（300px）、默认（600px）、
```
art-synthwave-starfield-lg
```
（900px）
修饰符：
```
art-synthwave-starfield-paused
```
— 暂停所有动画

子元素：

.art-synthwave-starfield-sides.art-synthwave-starfield-lefrig

.art-synthwave-starfield-sides.art-synthwave-starfield-topbot

.art-synthwave-starfield-stars

（×2）

自定义属性：

--art-synthwave-starfield-size

--art-synthwave-starfield-line-color

Gaming

游戏类

art-csswitch

— CSS-only game controller switch (Nintendo Switch inspired)

Sizes:
```
art-csswitch-sm
```
, default,
```
art-csswitch-lg
```

Children: complex controller structure with

.controller

.joycon-left

.joycon-right

.frame

.main-frame

.mushroom

.direction

.bar

.logo

.light

Custom properties:

--art-csswitch-size

--color

--color-shadow

--joycon-left

--joycon-left-shadow

--joycon-right

--joycon-right-shadow

art-csswitch

— 纯CSS实现的游戏手柄开关（灵感来自任天堂Switch）

尺寸：
```
art-csswitch-sm
```
, 默认,
```
art-csswitch-lg
```

子元素：复杂的手柄结构，包含

.controller

.joycon-left

.joycon-right

.frame

.main-frame

.mushroom

.direction

.bar

.logo

.light

自定义属性：

--art-csswitch-size

--color

--color-shadow

--joycon-left

--joycon-left-shadow

--joycon-right

--joycon-right-shadow

Loading

加载类

art-snowball-preloader

— Animated snowball loading spinner with orbital rings

Sizes:

art-snowball-preloader-sm

, default,

art-snowball-preloader-lg

Children:

.art-snowball-preloader-ball

.art-snowball-preloader-ball-texture

.art-snowball-preloader-ball-inner-shadow

.art-snowball-preloader-ball-outer-shadow

.art-snowball-preloader-ball-side-shadows

.art-snowball-preloader-inner-ring

.art-snowball-preloader-outer-ring

.art-snowball-preloader-track-cover

Custom properties:

--art-snowball-preloader-size

--art-snowball-preloader-bg

art-snowball-preloader

— 带有轨道环的动画雪球加载 spinner

尺寸：

art-snowball-preloader-sm

, 默认,

art-snowball-preloader-lg

子元素：

.art-snowball-preloader-ball

.art-snowball-preloader-ball-texture

.art-snowball-preloader-ball-inner-shadow

.art-snowball-preloader-ball-outer-shadow

.art-snowball-preloader-ball-side-shadows

.art-snowball-preloader-inner-ring

.art-snowball-preloader-outer-ring

.art-snowball-preloader-track-cover

自定义属性：

--art-snowball-preloader-size

--art-snowball-preloader-bg

UI Components

UI组件类

art-gemini-input

— Gemini-style animated conic-gradient border with glow halo on a textarea input

Sizes:
```
art-gemini-input-sm
```
(280px), default (450px),
```
art-gemini-input-lg
```
(640px)

Children:

.art-gemini-input-border

.art-gemini-input-inner

.art-gemini-input-btn

.art-gemini-input-field

(textarea)

Custom properties:

--art-gemini-input-width

--art-gemini-input-border-size

--art-gemini-input-gradient

art-gemini-input

— Gemini风格的动画圆锥渐变边框输入框，带有发光光晕

尺寸：
```
art-gemini-input-sm
```
（280px）、默认（450px）、
```
art-gemini-input-lg
```
（640px）

子元素：

.art-gemini-input-border

.art-gemini-input-inner

.art-gemini-input-btn

.art-gemini-input-field

（textarea）

自定义属性：

--art-gemini-input-width

--art-gemini-input-border-size

--art-gemini-input-gradient

Usage Examples

使用示例

Basic Moon

基础月亮

html

<div class="art-moon"></div>

html

<div class="art-moon"></div>

Crescent Moon with Glow

带发光效果的新月

html

<div class="art-moon art-moon-crescent art-moon-glow"></div>

html

<div class="art-moon art-moon-crescent art-moon-glow"></div>

Sun with Animated Rays

带动画光线的太阳

html

<div class="art-sun art-sun-rays"></div>

html

<div class="art-sun art-sun-rays"></div>

Sunset Sun

日落太阳

html

<div class="art-sun art-sun-sunset art-sun-rays"></div>

html

<div class="art-sun art-sun-sunset art-sun-rays"></div>

Single Mountain

单个山峰

html

<div class="art-mountain"></div>

html

<div class="art-mountain"></div>

Mountain Range

山脉

html

<div class="art-mountain-range">
  <div class="art-peak"></div>
  <div class="art-peak"></div>
  <div class="art-peak"></div>
</div>

html

<div class="art-mountain-range">
  <div class="art-peak"></div>
  <div class="art-peak"></div>
  <div class="art-peak"></div>
</div>

Atom

原子

html

<div class="art-atom">
  <div class="electron"></div>
  <div class="electron-alpha"></div>
  <div class="electron-omega"></div>
</div>

html

<div class="art-atom">
  <div class="electron"></div>
  <div class="electron-alpha"></div>
  <div class="electron-omega"></div>
</div>

Eclipse

日食

html

<div class="art-eclipse">
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
  <div class="layer layer-3"></div>
  <div class="layer layer-4"></div>
  <div class="layer layer-5"></div>
  <div class="layer layer-6"></div>
</div>

html

<div class="art-eclipse">
  <div class="layer layer-1"></div>
  <div class="layer layer-2"></div>
  <div class="layer layer-3"></div>
  <div class="layer layer-4"></div>
  <div class="layer layer-5"></div>
  <div class="layer layer-6"></div>
</div>

Snowflakes

雪花

html

<!-- Simple dot snowflake -->
<div class="art-snowflake art-snowflake-fall"></div>

<!-- Unicode snowflake character -->
<div class="art-snowflake art-snowflake-unicode art-snowflake-fall"></div>

html

<!-- 简单圆点雪花 -->
<div class="art-snowflake art-snowflake-fall"></div>

<!-- Unicode雪花字符 -->
<div class="art-snowflake art-snowflake-unicode art-snowflake-fall"></div>

Plasma Ball (Interactive)

等离子球（交互式）

html

<div class="art-plasma-ball">
  <input class="switcher" type="checkbox" />
  <div class="glassball">
    <div class="electrode"></div>
    <div class="rays">
      <div class="ray"><span></span><span></span><span></span></div>
      <div class="ray bigwave"><span></span><span></span></div>
      <div class="ray"><span></span><span></span><span></span></div>
      <div class="ray bigwave"><span></span><span></span></div>
      <div class="ray"><span></span><span></span><span></span></div>
    </div>
    <!-- repeat .rays block 5 more times for full coverage -->
  </div>
  <div class="base"><div></div><div></div><span></span></div>
  <div class="switch"></div>
</div>

html

<div class="art-plasma-ball">
  <input class="switcher" type="checkbox" />
  <div class="glassball">
    <div class="electrode"></div>
    <div class="rays">
      <div class="ray"><span></span><span></span><span></span></div>
      <div class="ray bigwave"><span></span><span></span></div>
      <div class="ray"><span></span><span></span><span></span></div>
      <div class="ray bigwave"><span></span><span></span></div>
      <div class="ray"><span></span><span></span><span></span></div>
    </div>
    <!-- 重复.rays块5次以实现完整覆盖 -->
  </div>
  <div class="base"><div></div><div></div><span></span></div>
  <div class="switch"></div>
</div>

Cat Stargazer

观星猫咪

html

<div class="art-cat-stargazer">
  <div class="moon"></div>
  <div class="cat">
    <div class="bubble"></div>
    <div class="backpack"></div>
    <div class="tail"></div>
    <div class="body">
      <div class="leg"></div>
      <div class="paw"></div><div class="paw"></div>
    </div>
    <div class="ear"></div><div class="ear"></div>
    <div class="head">
      <div class="whisker"></div><div class="whisker"></div>
      <div class="whisker"></div><div class="whisker"></div>
      <div class="nose"></div>
      <div class="eye"></div><div class="eye"></div>
    </div>
  </div>
</div>

html

<div class="art-cat-stargazer">
  <div class="moon"></div>
  <div class="cat">
    <div class="bubble"></div>
    <div class="backpack"></div>
    <div class="tail"></div>
    <div class="body">
      <div class="leg"></div>
      <div class="paw"></div><div class="paw"></div>
    </div>
    <div class="ear"></div><div class="ear"></div>
    <div class="head">
      <div class="whisker"></div><div class="whisker"></div>
      <div class="whisker"></div><div class="whisker"></div>
      <div class="nose"></div>
      <div class="eye"></div><div class="eye"></div>
    </div>
  </div>
</div>

Color Spin

彩色旋转环

html

<div class="art-color-spin">
  <ul>
    <li style="--i:1"></li>
    <li style="--i:2"></li>
    <li style="--i:3"></li>
    <li style="--i:4"></li>
  </ul>
</div>

html

<div class="art-color-spin">
  <ul>
    <li style="--i:1"></li>
    <li style="--i:2"></li>
    <li style="--i:3"></li>
    <li style="--i:4"></li>
  </ul>
</div>

Synthwave Starfield

合成波星空

html

<div class="art-synthwave-starfield">
  <div class="art-synthwave-starfield-sides art-synthwave-starfield-lefrig"></div>
  <div class="art-synthwave-starfield-sides art-synthwave-starfield-topbot"></div>
  <div class="art-synthwave-starfield-stars"></div>
  <div class="art-synthwave-starfield-stars"></div>
</div>

html

<div class="art-synthwave-starfield">
  <div class="art-synthwave-starfield-sides art-synthwave-starfield-lefrig"></div>
  <div class="art-synthwave-starfield-sides art-synthwave-starfield-topbot"></div>
  <div class="art-synthwave-starfield-stars"></div>
  <div class="art-synthwave-starfield-stars"></div>
</div>

Circular Gallery

圆形画廊

html

<div class="art-circular-gallery">
  <h1>Gallery</h1>
  <div style="--i:1" data-title="Photo 1"><a href="#item1"><img src="photo1.jpg" alt="Photo 1" /></a></div>
  <div style="--i:2" data-title="Photo 2"><a href="#item2"><img src="photo2.jpg" alt="Photo 2" /></a></div>
  <!-- repeat for up to 20 items -->
</div>

html

<div class="art-circular-gallery">
  <h1>Gallery</h1>
  <div style="--i:1" data-title="Photo 1"><a href="#item1"><img src="photo1.jpg" alt="Photo 1" /></a></div>
  <div style="--i:2" data-title="Photo 2"><a href="#item2"><img src="photo2.jpg" alt="Photo 2" /></a></div>
  <!-- 重复最多20个项目 -->
</div>

Flower Animation

花朵动画

html

<div class="art-flower-animation">
  <div class="night"></div>
  <div class="flowers">
    <div class="flower flower--1">
      <div class="flower__leafs flower__leafs--1">
        <div class="flower__leaf flower__leaf--1"></div>
        <div class="flower__leaf flower__leaf--2"></div>
        <div class="flower__leaf flower__leaf--3"></div>
        <div class="flower__leaf flower__leaf--4"></div>
        <div class="flower__white-circle"></div>
      </div>
      <div class="flower__line">
        <div class="flower__line__leaf flower__line__leaf--1"></div>
        <div class="flower__line__leaf flower__line__leaf--2"></div>
      </div>
    </div>
  </div>
</div>

html

<div class="art-flower-animation">
  <div class="night"></div>
  <div class="flowers">
    <div class="flower flower--1">
      <div class="flower__leafs flower__leafs--1">
        <div class="flower__leaf flower__leaf--1"></div>
        <div class="flower__leaf flower__leaf--2"></div>
        <div class="flower__leaf flower__leaf--3"></div>
        <div class="flower__leaf flower__leaf--4"></div>
        <div class="flower__white-circle"></div>
      </div>
      <div class="flower__line">
        <div class="flower__line__leaf flower__line__leaf--1"></div>
        <div class="flower__line__leaf flower__line__leaf--2"></div>
      </div>
    </div>
  </div>
</div>

Gemini Input

Gemini输入框

html

<div class="art-gemini-input">
  <div class="art-gemini-input-border"></div>
  <div class="art-gemini-input-inner">
    <button class="art-gemini-input-btn">+</button>
    <textarea class="art-gemini-input-field" placeholder="Ask Gemini..."></textarea>
    <button class="art-gemini-input-btn">▶</button>
  </div>
</div>

html

<div class="art-gemini-input">
  <div class="art-gemini-input-border"></div>
  <div class="art-gemini-input-inner">
    <button class="art-gemini-input-btn">+</button>
    <textarea class="art-gemini-input-field" placeholder="Ask Gemini..."></textarea>
    <button class="art-gemini-input-btn">▶</button>
  </div>
</div>

CSSwitch (Game Controller)

CSSwitch（游戏手柄）

html

<div class="art-csswitch">
  <div class="controller">
    <div class="frame">
      <div class="main-frame"><!-- controller frame --></div>
    </div>
  </div>
</div>

html

<div class="art-csswitch">
  <div class="controller">
    <div class="frame">
      <div class="main-frame"><!-- controller frame --></div>
    </div>
  </div>
</div>

Snowball Preloader

雪球加载器

html

<div class="art-snowball-preloader">
  <div class="art-snowball-preloader-outer-ring"></div>
  <div class="art-snowball-preloader-inner-ring"></div>
  <div class="art-snowball-preloader-track-cover"></div>
  <div class="art-snowball-preloader-ball">
    <div class="art-snowball-preloader-ball-texture"></div>
    <div class="art-snowball-preloader-ball-outer-shadow"></div>
    <div class="art-snowball-preloader-ball-inner-shadow"></div>
    <div class="art-snowball-preloader-ball-side-shadows"></div>
  </div>
</div>

html

<div class="art-snowball-preloader">
  <div class="art-snowball-preloader-outer-ring"></div>
  <div class="art-snowball-preloader-inner-ring"></div>
  <div class="art-snowball-preloader-track-cover"></div>
  <div class="art-snowball-preloader-ball">
    <div class="art-snowball-preloader-ball-texture"></div>
    <div class="art-snowball-preloader-ball-outer-shadow"></div>
    <div class="art-snowball-preloader-ball-inner-shadow"></div>
    <div class="art-snowball-preloader-ball-side-shadows"></div>
  </div>
</div>

Custom Colors

自定义颜色

Override CSS custom properties to customize any art piece:

html

<!-- Blue moon -->
<div class="art-moon" style="--art-moon-color: oklch(80% 0.08 240);"></div>

<!-- Custom-sized sun -->
<div class="art-sun" style="--art-sun-size: 6rem;"></div>

<!-- Green atom -->
<div class="art-atom" style="--art-atom-color: #00ff88;">
  <div class="electron"></div>
  <div class="electron-alpha"></div>
  <div class="electron-omega"></div>
</div>

覆盖CSS自定义属性以修改任意艺术作品：

html

<!-- 蓝色月亮 -->
<div class="art-moon" style="--art-moon-color: oklch(80% 0.08 240);"></div>

<!-- 自定义尺寸太阳 -->
<div class="art-sun" style="--art-sun-size: 6rem;"></div>

<!-- 绿色原子 -->
<div class="art-atom" style="--art-atom-color: #00ff88;">
  <div class="electron"></div>
  <div class="electron-alpha"></div>
  <div class="electron-omega"></div>
</div>

Composing a Night Scene

组合夜景

html

<div style="background: oklch(15% 0.02 260); padding: 3rem; position: relative; overflow: hidden;">
  <div class="art-moon art-moon-crescent art-moon-glow" style="position: absolute; top: 1rem; right: 2rem;"></div>
  <div class="art-snowflake art-snowflake-fall" style="left: 20%; --art-snowflake-duration: 6s;"></div>
  <div class="art-snowflake art-snowflake-fall" style="left: 50%; --art-snowflake-duration: 4s; animation-delay: 1s;"></div>
  <div class="art-snowflake art-snowflake-fall" style="left: 80%; --art-snowflake-duration: 5s; animation-delay: 2s;"></div>
  <div class="art-mountain-range" style="position: absolute; bottom: 0;">
    <div class="art-peak"></div>
    <div class="art-peak"></div>
    <div class="art-peak"></div>
  </div>
</div>

html

<div style="background: oklch(15% 0.02 260); padding: 3rem; position: relative; overflow: hidden;">
  <div class="art-moon art-moon-crescent art-moon-glow" style="position: absolute; top: 1rem; right: 2rem;"></div>
  <div class="art-snowflake art-snowflake-fall" style="left: 20%; --art-snowflake-duration: 6s;"></div>
  <div class="art-snowflake art-snowflake-fall" style="left: 50%; --art-snowflake-duration: 4s; animation-delay: 1s;"></div>
  <div class="art-snowflake art-snowflake-fall" style="left: 80%; --art-snowflake-duration: 5s; animation-delay: 2s;"></div>
  <div class="art-mountain-range" style="position: absolute; bottom: 0;">
    <div class="art-peak"></div>
    <div class="art-peak"></div>
    <div class="art-peak"></div>
  </div>
</div>

CSS Architecture

CSS架构

All classes prefixed with
```
.art-
```
to avoid collisions
All custom properties prefixed with
```
--art-
```
for namespacing
Uses
```
@layer css-art
```
to avoid cascade conflicts with other libraries
Colors use OKLCH format for perceptual uniformity
Animations use
```
@keyframes
```
with
```
art-
```
prefixed names

所有类均以
```
.art-
```
为前缀，避免命名冲突
所有自定义属性均以
```
--art-
```
为前缀，实现命名空间隔离
使用
```
@layer css-art
```
避免与其他库的样式层级冲突
颜色采用OKLCH格式，保证感知一致性
动画使用带
```
art-
```
前缀的
```
@keyframes
```
名称

Importing Individual Art Pieces

导入单个艺术作品

css

/* Import only what you need */
@import "@duskmoon-dev/css-art/art";

css

/* 仅导入所需内容 */
@import "@duskmoon-dev/css-art/art";

Development Commands

开发命令

bash

undefined

bash

undefined

Build css-art package

构建css-art包

bun run build:css-art

Watch mode

监听模式

bun run dev:css-art

Unit tests

单元测试

cd packages/css-art && bun test tests/unit

undefined

cd packages/css-art && bun test tests/unit

undefined

Bundle Size

包体积

Unminified: ~50 KB
Minified: ~36 KB

未压缩：约50 KB
已压缩：约36 KB