純CSS 實現 Lightbox 燈箱效果

效果預覽：（有防盜鏈，麻煩手動複製到新窗口打開）

用僞類 :focus 實現：

https://ssl.huching.net/demo-...

用僞類 :target 實現：

https://ssl.huching.net/demo-...

(具體代碼能夠直接在 demo 的源代碼裏邊查看)

簡單說一下原理：

用 :focus 實現須要添加以添加 input 元素。由於 :focus 只對 input 有效。
爲每一張圖片添加一個 input 層，而後用樣式調教成看不出來。當 input 獲取到焦點的時候，就添加圖片放大的效果。

用 :target 實現須要添加多個錨連接。這種用法網上有許多實例。

---

:focus 實現的缺點：

• 添加了一個 input，而後假裝成普通元素，不夠純粹；

• 由於是獲取焦點，鼠標右鍵也會觸發效果；

• 自定義不一樣的光標樣式（cursor）會有延時；

:target 實現的缺點：

• 網址裏邊有多個 #id ，有礙美觀，影響前進後退；

• 無法直接選擇 #close ，須要屢次添加，不夠簡潔；

• 無法直接點擊圖片還原；

鄙人總結了一些網上常見的僞類的妙用（ CSS Tab欄切換效果、CSS手風琴效果 等），有興趣的能夠看看：

http://huching.net/2016/11/cs...