這個範例結合了 CSS 的模糊濾鏡（Blur Filter）以及 JavaScript 的點擊互動，完美模擬了類似 Threads 的「防劇透」效果。
你可以將下方的程式碼儲存為 `.html` 檔案後直接開啟：
```html
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>JS 防劇透效果示範</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50px;
background-color: #f0f2f5;
}
.post-card {
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
max-width: 400px;
width: 90%;
}
h3 { margin-top: 0; color: #1c1e21; }
/* 防劇透容器 */
.spoiler-container {
position: relative;
cursor: pointer;
overflow: hidden;
border-radius: 8px;
background: #eee;
margin: 15px 0;
}
/* 文字內容：預設模糊 */
.spoiler-content {
padding: 15px;
line-height: 1.6;
filter: blur(12px); /* 核心：模糊濾鏡 */
transition: filter 0.5s ease; /* 平滑淡出效果 */
user-select: none; /* 防止使用者透過反白選取偷看 */
}
/* 中央提示遮罩 */
.spoiler-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.05);
transition: opacity 0.3s ease;
z-index: 10;
}
.spoiler-btn {
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
backdrop-filter: blur(4px);
}
/* 點擊後的狀態變化 */
.spoiler-container.revealed .spoiler-content {
filter: blur(0);
user-select: text;
}
.spoiler-container.revealed .spoiler-overlay {
opacity: 0;
pointer-events: none; /* 讓點擊穿透，不再阻擋下方文字 */
}
</style>
</head>
<body>
<div class="post-card">
<h3>🎬 電影討論區</h3>
<p>大家覺得昨晚的結局怎麼樣？我覺得這段超級精彩：</p>
<div class="spoiler-container" onclick="revealSpoiler(this)">
<div class="spoiler-overlay">
<div class="spoiler-btn">點擊顯示劇透內容</div>
</div>
<div class="spoiler-content">
其實主角在最後一幕並沒有死，他只是進入了另一個平行時空！
而且驚喜彩蛋顯示，他手上的戒指竟然是 2026 年才發行的紀念版...
</div>
</div>
<p style="color: #65676b; font-size: 13px;">點擊上方區塊以解除模糊</p>
</div>
<script>
function revealSpoiler(element) {
// 為容器加上 revealed 類別，觸發 CSS transition
element.classList.add('revealed');
}
</script>
<style>
/* 隱藏核取方塊 */
.spoiler-check { display: none; }
/* 預設模糊內容 */
.spoiler-content {
filter: blur(10px);
cursor: pointer;
transition: 0.3s;
}
/* 當核取方塊被勾選時，後面的內容取消模糊 */
.spoiler-check:checked + .spoiler-content {
filter: blur(0);
}
</style>
<label>
<input type="checkbox" class="spoiler-check">
<div class="spoiler-content">
這是純 CSS 做的防劇透，點一下就看清楚了！
</div>
</label>
<label>
<input type="checkbox" class="spoiler-check">
<div class="spoiler-content">
這是純 CSS 做的防劇透，點一下就看清楚了！
</div>
</label>
</body>
</html>
```
### 💡 程式碼亮點說明：
1. **`filter: blur(12px)`**: 這是視覺效果的靈魂。它能讓文字保持大致的輪廓感，但完全無法辨識具體內容，非常有 Threads 的風格。
2. **`transition`**: 當點擊後，濾鏡從 `12px` 變成 `0`，會有一個 0.5 秒的「視覺恢復」動畫，看起來比直接切換更高級。
3. **`user-select: none`**: 這是一個容易被忽略的關鍵點！如果不加這行，使用者可以用滑鼠反白選取模糊的文字，複製到記事本就能偷看。
4. **`pointer-events: none`**: 揭曉內容後，我們讓黑色的提示按鈕「不再接收點擊事件」，這樣使用者才能正常選取或點擊裡面的內容。
如果您需要「點擊後再模糊回去」的開關功能，只需將 `classList.add` 改成 `classList.toggle` 即可！