纯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...