feat(ui): 实现ACG风格UI改造和动画效果
添加樱花飘落和表情点击特效组件,优化卡片动画和背景模糊效果 更新主题色为粉色并添加动漫风格背景图 引入圆角字体提升可爱风格 新增开发文档记录改造计划
This commit is contained in:
24
.trae/documents/ACG Animation Enhancement Plan.md
Normal file
24
.trae/documents/ACG Animation Enhancement Plan.md
Normal file
@@ -0,0 +1,24 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user