CSS為你的網站文章添加防劇透用的黑幕、模糊效果

其實我懶… 雖然之前在弄的時候，我就順手寫了一篇給全站頁面用的寫文用相關工具，已經把用法整理的差不多了。
不過我現在重新專門開一篇新的文，最主要是為了要關我先前開著閒置的瀏覽器分頁，有幾個和黑幕有關的參考網頁，想把幾個教學留下來做紀錄。

spoiler Heimu 黑幕

檔案：　spoiler.css

• 取自於: https://dev.fandom.com/wiki/Heimu
• Release status: Experimental
• Description: Hide contents in spoiler bars and reveal the contents when the cursor is hovering over the spoiler bars
• Author(s): HyperNervie
• Scope: Site-wide
• Updated: October 29, 2022
• 此部份授權：Community content is available under CC-BY-SA unless otherwise noted.
• 額外有對Dark Mode模式與新增
  標籤支援的需求有做小改動

預覽

寫法

HTML原始寫法

1
2
3

<p>這段字是<span class="heimu">防止被劇透的黑幕設計</span>測試</p>
<p class="heimu">直接做整段防止被劇透的黑幕設計測試</p>
<p class="heimu"><img src="https://fimg.yuaner.tw/100" alt="圖片放置處"></p>

用在本站部落格，搭配markdown-it-attrs渲染引擎後，可以用的簡短寫法

1
2
3
4
5

這段字是[防止被劇透的黑幕設計]{.heimu}測試

直接做整段防止被劇透的黑幕設計測試 {.heimu}

![圖片放置處](https://fimg.yuaner.tw/100) {.heimu}

參考教學

• 模板:黑幕 - 萌娘百科
• 萌娘百科黑幕效果教程 – a39’s Blog
• 将萌百黑幕加入你的网站！ – 北河天文台
• Attribute List - 游戏和谐 Wiki
• 萌娘百科黑幕实现 | 瞎折腾
• CSS+JS轻松实现自定义黑幕效果 - 无限·领域
• Heimu (a.k.a. Spoiler Bars) | Fandom Developers Wiki | Fandom
• 還在考慮要不要用
  • SpoilerTags | Fandom Developers Wiki | Fandom

spoiler Blur 模糊

• 取自於: https://dev.fandom.com/wiki/SpoilerBlur
• Release status: Stable
• Description: Blurs spoiler section or word(s)
• Author(s): Sprye
• Scope: Site-wide
• Updated: July 20, 2024
• 此部份授權：Community content is available under CC-BY-SA unless otherwise noted.
• 額外有新增class語法糖 .hovers-blur ，比照萌娘百科。並調整動畫時間成.50s，不延遲播放動畫。

預覽

寫法

HTML原始寫法

1
2
3

<p>這段字是<span class="hovers-blur">防止被劇透的模糊文字設計</span>測試</p>
<p class="hovers-blur">直接做整段防止被劇透的模糊文字設計測試</p>
<p class="hovers-blur"><img src="https://fimg.yuaner.tw/100" alt="圖片放置處"></p>

用在本站部落格，搭配markdown-it-attrs渲染引擎後，可以用的簡短寫法

1
2
3
4
5

這段字是[防止被劇透的模糊文字設計]{.hovers-blur}測試

直接做整段防止被劇透的模糊文字設計測試 {.hovers-blur}

![圖片放置處](https://fimg.yuaner.tw/100) {.hovers-blur}

參考教學

• 模板:文字模糊 - 萌娘百科
• SpoilerBlur | Fandom Developers Wiki | Fandom