blog/.trae/documents/ACG Animation Enhancement Plan.md at b6abc327840b8eb19f42449e7f90540ab04dc8a2

Files

lirui b6abc32784 feat(ui): 实现ACG风格UI改造和动画效果

添加樱花飘落和表情点击特效组件，优化卡片动画和背景模糊效果
更新主题色为粉色并添加动漫风格背景图
引入圆角字体提升可爱风格
新增开发文档记录改造计划

2026-01-11 12:59:41 +08:00

1.6 KiB

Raw Blame History

I will implement several interactive animations and visual enhancements to meet the user's request for a "prettier" and more "animated" ACG-style blog.

1. Emoji Click Burst Effect

I will create a new component EmojiCursor.astro that listens for click events and spawns floating emojis that fade out.

Implementation: A client-side script that creates span elements with random emojis at the cursor position, animates them upwards, and removes them.
Emojis: 🌸, 💖, ✨, 🍬, 🎀, 🍭, 🍡 (ACG/cute themed).

2. Falling Sakura (Cherry Blossom) Effect

I will create a Sakura.astro component using a lightweight canvas script to simulate falling cherry blossom petals.

Placement: A fixed-position canvas covering the screen, with pointer-events: none so it doesn't interfere with clicks.
Visuals: Pink/White petals gently drifting down.

3. Fade-in & Slide-up Animations

I will add global CSS keyframes to src/styles/main.css to animate elements when they appear.

Target: .card-base, .btn-card
Effect: fade-in-up (opacity 0 -> 1, translate-y 20px -> 0).
Stagger: I'll try to use CSS nth-child selectors or a simple JS script to stagger the animation for a cascading effect.

4. Integration

I will import EmojiCursor and Sakura components into src/layouts/Layout.astro so they are available on every page.

5. Polishing

Live2D Suggestion: I will add a comment/placeholder for Live2D in the layout, as a full implementation might be heavy, but I'll focus on the requested "emoji animations" first.
Link Hover: Add a "rubber band" or "pulse" animation to navigation links.

1.6 KiB Raw Blame History