前言
昨天我們幫按鈕加上了療癒的合成音效，讓整個網頁的點擊回饋感變得很好。但既然我們的專題叫「賽博紓壓診所」，光靠按鈕發聲還不夠過癮——面對生活中那些讓人頭痛的日常壓力（像是永遠寫不完的作業、突然冒出來的死線、還有長輩群組的長輩圖），最直接的舒壓方式是什麼？

當然是把這些討厭的字眼給「消滅」掉啊！

今天我們要來實作一個很有梗的小互動：「惡言消滅器」浮動元素。讓畫面背景隨時漂浮著幾個讓人理智斷線的負面關鍵字，使用者只需要用滑鼠點擊它們，就會像打地鼠一樣直接消失，把壓力當場物理超渡！

核心觀念：固定定位與浮動動畫
要做出這種「從畫面下方往上飄」的浮動特效，其實不需要引入複雜的物理引擎，只要善用兩個 CSS 特性：

1. position: fixed： 讓這些負面標籤可以懸浮在所有 UI 元素的正上方，不受排版限制。
2. @keyframes 移動與透明度變化： 讓它們從畫面最下方（105vh）一路往上飄到頂部（-10vh），同時伴隨一點隨機的位移與淡出效果，製造出像是氣泡或煙霧飄過去的感覺。

當使用者點擊時，我們只需要寫一個短短的 JavaScript 函式，直接把該元素從 DOM 裡面移除（remove()）就大功告成了！

動手寫 Code：惡言消滅器的 CSS 與無限生成邏輯
今天我們把焦點放在這個浮動壓力標籤的實作上。我們準備了幾個常見的崩潰來源陣列（例如論文死線、明天要交報告），並利用 setInterval 讓它們源源不絕地從畫面下方漂浮出來：

    .card {
        background: #ffffff;
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        text-align: center;
        position: relative;
        z-index: 10;
    }

    /* 浮動壓力目標樣式 */
    .rage-target {
        position: fixed;
        background: #ff5252;
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        cursor: pointer;
        z-index: 100;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        /* 綁定浮動動畫：8秒線性移動 */
        animation: floatRandom 8s forwards linear;
        user-select: none;
        transition: transform 0.1s, opacity 0.2s;
    }

    .rage-target:hover {
        transform: scale(1.1);
        background: #ff1744;
    }

    /* 定義從下往上飄的動畫軌跡 */
    @keyframes floatRandom {
        0% { transform: translateY(105vh) translateX(0); opacity: 0.9; }
        100% { transform: translateY(-10vh) translateX(30px); opacity: 0; }
    }

    .btn {
        background-color: #1e88e5;
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 30px;
        font-size: 1rem;
        cursor: pointer;
    }
</style>

<div class="card">
    <h2>💥 惡言消滅器</h2>
    <p>試著點擊畫面上飄過去的紅色氣泡，把壓力捏碎吧！</p>
</div>

<script>
    // 準備一個萬惡的壓力詞庫
    const rageWords = ["🔥 論文死線", "🔥 明天要交報告", "🔥 長輩群組訊息", "🔥 存款餘額不足", "🔥 專案又改需求"];

    // 點擊後消滅目標的互動函式
    function destroyTarget(element) {
        // 點擊瞬間放大並淡出，增加打擊回饋感
        element.style.transform = "scale(1.5)";
        element.style.opacity = "0";
        
        // 稍微延遲後從網頁 DOM 中徹底移除
        setTimeout(() => {
            element.remove();
        }, 200); // 配合 CSS 轉場時間
    }

    // 建立動態生成氣泡的函式
    function spawnRageTarget() {
        // 隨機挑選一個壓力詞
        const randomWord = rageWords[Math.floor(Math.random() * rageWords.length)];
        // 隨機決定出現的水平位置 (10% ~ 80%)
        const randomLeft = Math.floor(Math.random() * 70) + 10;
        
        // 用 JS 創造一個新的 div 標籤
        const el = document.createElement('div');
        el.className = 'rage-target';
        el.innerText = randomWord;
        el.style.left = `${randomLeft}%`;
        
        // 綁定點擊事件
        el.onclick = function() { destroyTarget(this); };
        
        // 把新氣泡塞進網頁裡
        document.body.appendChild(el);

        // 為了避免畫面掛著太多沒被點掉的氣泡導致卡頓，8秒後動畫結束自動清除
        setTimeout(() => {
            if(document.body.contains(el)) el.remove();
        }, 8000);
    }

    // 每 2 秒就自動吐出一個新的壓力氣泡！
    setInterval(spawnRageTarget, 2000);
</script>

開發心得與想法
在設計這個小功能的時候，我一直覺得網頁不該只是冷冰冰填表格或點按鈕。尤其是做這種跟心靈紓壓有關的主題，如果能帶入一點惡搞、互動的小巧思，讓使用者在操作時會心一笑，那這個專題的趣味性就會立刻被拉高。

雖然只是簡單的 position: fixed 搭配 @keyframes 動畫，再配合 JavaScript 的定時器讓它無限生成，但看著那些討厭的關鍵字在畫面飄過，滑鼠點下去「啪」一聲消失，實際玩起來還真的挺療癒的！前端開發最好玩的地方就在這裡，用幾行簡單的 CSS 和 JS，就能把腦中的惡趣味直接變成能實際互動的小工具。

今日結語與明日預告
今天我們透過浮動 CSS 動畫與簡單的 DOM 動態生成及移除技巧，打造了讓人忍不住想一直點的「惡言消滅器」。

明天 Day 10：心理測驗核心題庫與選項動態生成機制。我們就要正式進入整個專題的重頭戲——開始建置 10 道靈魂拷問的情境題庫，並用程式碼把選項動態渲染出來！我們明天見！