DynamicGradientBackground/index.html at main · alfo0924/DynamicGradientBackground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>動態漸層背景展示</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 導航欄 -->
<nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
        <a class="navbar-brand" >動態漸層背景</a>
        <button class="navbar-toggler bg-light " type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse m-2" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" data-target="basic-gradient" href="#">基本動態漸層背景</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-target="advanced-gradient" href="#">進階動態漸層背景</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-target="interactive-gradient" href="#">互動式動態漸層背景</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-target="rainbow-gradient" href="#">彩虹圓錐漸層背景</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 基本動態漸層背景 -->
<section id="basic-gradient" class="content-section active-section">
    <div class="section-info">
        <h1>基本動態漸層背景</h1>
        <p class="lead">這是一個使用 CSS 實現的簡單動態漸層背景效果。通過 CSS 動畫屬性，背景顏色在不同色調之間平滑過渡。</p>
        <p>這種效果使用了 CSS 的 linear-gradient 和 animation 屬性，通過設置背景尺寸為 400% 並使用 keyframes 動畫來移動背景位置，從而產生顏色流動的效果。</p>
    </div>
</section>

<!-- 進階動態漸層背景 -->
<section id="advanced-gradient" class="content-section">
    <div class="gradient-container">
        <div class="gradient-blob blob1"></div>
        <div class="gradient-blob blob2"></div>
        <div class="gradient-blob blob3"></div>
    </div>
    <div class="section-info">
        <h1>進階動態漸層背景</h1>
        <p class="lead">這是一個使用模糊效果和多層動畫的高級漸層背景。</p>
        <p>這個版本使用了多個帶有模糊效果的漸層元素，並為每個元素設置了不同的動畫路徑，創造出更加豐富的視覺效果。</p>
    </div>
</section>

<!-- 互動式動態漸層背景 -->
<section id="interactive-gradient" class="content-section">
    <div class="interactive-container">
        <div class="interactive-blob int-blob1"></div>
        <div class="interactive-blob int-blob2"></div>
    </div>
    <div class="section-info">
        <h1>互動式動態漸層背景</h1>
        <p class="lead">移動滑鼠來與背景互動！</p>
        <p>這個版本使用了 JavaScript 來監聽滑鼠移動事件，並根據滑鼠位置動態調整漸層元素的位置、旋轉角度和顏色，創造出與用戶互動的效果。</p>
    </div>
</section>

<!-- 彩虹圓錐漸層背景 -->
<section id="rainbow-gradient" class="content-section">
    <div class="rainbow-background"></div>
    <div class="blur-overlay"></div>
    <div class="section-info">
        <h1>彩虹圓錐漸層背景</h1>
        <p class="lead">使用 conic-gradient 創建旋轉的彩虹效果。</p>
        <p>這個版本使用了 CSS 的 conic-gradient 屬性來創建彩虹圓錐漸層效果，並添加了旋轉動畫和模糊覆蓋層，創造出柔和的彩虹背景效果。</p>
    </div>
</section>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js" defer ></script>
</body>
</html>