{{ $t('samples.actions.duplicate') }}
{{ $t('samples.actions.demo') }}
流星動畫效果
僅用 HTML、CSS 與 JavaScript 建立令人印象深刻的動態背景,適用於形象頁或開場畫面。
{{ $t('samples.actions.prompt') }}
僅使用 HTML、CSS 與 JavaScript,建立令人印象深刻的動態背景,適用於形象頁或開場畫面。
1. 背景動畫
使用 CSS 漸層動畫,讓顏色平滑地水平或斜向變化以模擬移動。動畫需無限循環、銜接流暢。採用適合夜空的深色,如深藍、紫色與黑色。
2. 流星效果
在夜空上加入閃爍星星與流星動畫。流星在隨機時間與位置出現,快速斜向移動並自然淡出。星星與流星可使用 CSS 動畫或 JavaScript 的 <canvas> 實作。
3. 互動與最佳化
採響應式設計,針對桌面與行動裝置最佳化。動畫需流暢運作,避免過度使用 CPU。不需互動,僅作為背景視覺效果。
用途
適合形象頁、作品集介紹、遊戲載入畫面或其他開場動畫。
{{ $t('samples.actions.copied') }}