timmy / 增強版頁面內導航與動畫效果
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
這是一個帶有固定導航欄的 HTML 範例，實現了頁面內導航、滾動高亮導航連結、區塊進入視窗時的動畫效果，以及返回頂部按鈕功能，並使用 JavaScript 自訂平滑滾動效果增強用戶體驗。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>增強版頁面內導航範例</title> |
| 6 | <style> |
| 7 | body { |
| 8 | font-family: Arial, sans-serif; |
| 9 | /* 移除 CSS 平滑滾動，使用 JavaScript 控制 */ |
| 10 | margin: 0; |
timmy / 使用 Lit 與 Animate.css 建立動態 Web 元件
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
這段 HTML 結合 Lit 和 Animate.css，建立了一個 自訂 Web Component <my-component>，透過 Animate.css 提供彈跳（bounce）動畫效果，讓文字顯示時具有動態感。它示範了 如何在 Lit 中整合外部 CSS 動畫庫，適用於 前端 UI 動畫、互動式網頁元件或吸引使用者注意的視覺效果設計。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Lit with Animate.css</title> |
| 7 | <!-- 引入 Animate.css --> |
| 8 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
Nowsze
Starsze