timmy / 使用 Lit 建立互動式年份時間軸
0 喜歡
0 分支
1 檔案
最後活躍 10 months ago
這段 HTML + Lit 程式碼使用 Web Components 技術，建立了一個 年份時間軸 (<timeline-element>)，用於 以視覺化方式顯示歷史事件或時間序列。它包含 多個事件 (<event-element>)，每個事件都有標題和描述，並根據奇偶數自動 排列在時間軸的左右兩側。此時間軸支援 動態效果（懸停陰影、點擊事件），並針對 手機響應式調整顯示方式，適用於 歷史紀錄、產品發展時間軸、事件展示 等場景，提供 互動性高、現代化的時間軸視覺呈現。
| 1 | <!doctype html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>年份時間軸 - Lit 元素</title> |
| 7 | <style> |
| 8 | body { |
| 9 | font-family: "Microsoft JhengHei", Arial, sans-serif; |
| 10 | background-color: #f0f0f0; |
上一頁
下一頁