纯 CSS 中秋贺卡
零图片素材的中秋互动贺卡，用多层径向渐变、混合模式与 @property 完成画面和动效。
比赛作品Web纯 CSSCSSCSS AnimationModern CSS
- 第 2 名
- 中秋挑战赛决赛
ENGINEERING HIGHLIGHTS
难点与亮点
祥云背景
多组 radial-gradient 反复叠加，用纯 CSS 组成连续的祥云纹理。
混合模式
通过 mix-blend-mode 实现中间的镜空月亮，透出下层祥云背景。
@property
注册带类型的 CSS 自定义属性，让渐变参数可以平滑过渡和动画。
零图片素材
全部视觉由渐变、遮罩、伪元素与动画组合完成。
作品介绍
不使用任何图片素材：多层 radial-gradient 叠加出祥云背景，再通过 mix-blend-mode 做出透露底层祥云的镜空月亮；同时使用 @property 注册渐变参数，实现可平滑过渡的 CSS 动画。
作品最终获得 中秋挑战赛决赛第 2 名。