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