feat(ui): 实现ACG风格UI改造和动画效果
添加樱花飘落和表情点击特效组件,优化卡片动画和背景模糊效果 更新主题色为粉色并添加动漫风格背景图 引入圆角字体提升可爱风格 新增开发文档记录改造计划
This commit is contained in:
34
src/components/widget/EmojiCursor.astro
Normal file
34
src/components/widget/EmojiCursor.astro
Normal file
@@ -0,0 +1,34 @@
|
||||
<script>
|
||||
function createEmoji(e: MouseEvent) {
|
||||
const emojis = ["🌸", "💖", "✨", "🍬", "🎀", "🍭", "🍡", "🐱", "🍥"];
|
||||
const emoji = document.createElement("div");
|
||||
emoji.innerText = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
emoji.style.position = "fixed";
|
||||
emoji.style.left = e.clientX + "px";
|
||||
emoji.style.top = e.clientY + "px";
|
||||
emoji.style.fontSize = Math.random() * 20 + 10 + "px";
|
||||
emoji.style.pointerEvents = "none";
|
||||
emoji.style.userSelect = "none";
|
||||
emoji.style.zIndex = "9999";
|
||||
emoji.style.transition = "all 1s ease-out";
|
||||
|
||||
// Initial randomness
|
||||
const x = (Math.random() - 0.5) * 50;
|
||||
const y = (Math.random() - 0.5) * 50;
|
||||
|
||||
document.body.appendChild(emoji);
|
||||
|
||||
// Animate
|
||||
requestAnimationFrame(() => {
|
||||
emoji.style.transform = `translate(${x}px, ${y - 50}px)`;
|
||||
emoji.style.opacity = "0";
|
||||
});
|
||||
|
||||
// Cleanup
|
||||
setTimeout(() => {
|
||||
emoji.remove();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
document.addEventListener("click", createEmoji);
|
||||
</script>
|
||||
Reference in New Issue
Block a user