你现在已经完成了 Svelte 教程并准备开始构建。
¥You’ve now finished the Svelte tutorial and are ready to start building.
本教程的下两部分将重点介绍 SvelteKit，这是一个用于创建各种形状和大小的应用的完整框架。
¥The next two parts of the tutorial will focus on SvelteKit, a full-fledged framework for creating apps of all shapes and sizes.
如果你正遭受信息过载的困扰，并且还没有准备好完成 SvelteKit 教程，请不要担心！你可以使用现有的 Svelte 知识，而无需学习所有 SvelteKit。只需在终端中运行此命令并按照提示操作即可……
¥If you’re suffering from information overload and aren’t ready to go through the SvelteKit tutorial yet, don’t worry! You can use your existing Svelte knowledge without learning all of SvelteKit. Just run this in your terminal and follow the prompts...
npx sv create...并开始编辑 src/routes/+page.svelte。当你准备好时，点击下面的链接继续你的旅程。
¥...and start editing src/routes/+page.svelte. When you’re ready, click the link below to continue your journey.
<script>
let characters = ['🥳', '🎉', '✨'];
let confetti = $state(new Array(100)
.fill()
.map((_, i) => { return {character:
characters[i % characters.length],
x: Math.random() * 100,
y: -20 - Math.random() * 100,
r: 0.1 + Math.random() * 1
};
})
.sort((a, b) => a.r - b.r));
$effect(() => { let frame = requestAnimationFrame(function loop() {frame = requestAnimationFrame(loop);
for (const confetto of confetti) {confetto.y += 0.3 * confetto.r;
if (confetto.y > 120) confetto.y = -20;
}
});
return () => {cancelAnimationFrame(frame);
}
});
</script>
{#each confetti as c}<span
style:left="{c.x}%" style:top="{c.y}%" style:scale={c.r}>
{c.character}</span>
{/each}<style>
span {position: absolute;
font-size: 5vw;
user-select: none;
}
:global(body) {overflow: hidden;
}
</style>