如何仅使用 css 实现灯箱效果？可用示例答案

【问题标题】：How to achieve a lightbox effect with css only? Example available如何仅使用 css 实现灯箱效果？可用示例
【发布时间】：2011-07-22 07:33:01
【问题描述】：

http://www.w3css.co.uk/

该网站说它不使用：target，我查看了源代码，据我所知没有js，所以它只是css吗？如何。非常感谢一个小的小提琴示例或解释。谢谢。

【问题讨论】：

【解决方案1】：

缩略图上使用的 CSS 选择器是 :focus 和 :active 选择器，当您单击锚点时会应用它们（激活是为了与 IE 兼容，您将在 Firebug 中看到）。

这些选择器只是具有将压缩图像扩展为全尺寸的 CSS 过渡，那么当您单击另一个元素并且灯箱消失时，显然:focus 会丢失。您也可以使用 tab 键进行导航，这样您只需在锚点之间切换焦点，从而再次激活 CSS 过渡。

【讨论】：

【解决方案2】：

:active 用于 IE 的伪类，:focus 用于非 IE 的伪类，如 the CSS 中所述。

【讨论】：

【解决方案3】：

了解 css3 过渡（this 链接有很好的解释），它提供了一种对 CSS 属性的更改进行动画处理的方法，而不是让更改立即生效，该站点演示了使用它可以实现的一些效果

【讨论】：

【解决方案4】：

触发打开灯箱的事件是焦点事件。这也是为什么您可以通过按 tab 或 shift-tab 来切换图像的原因。正如 Neil 所说，您可以在 css 文件中找到详细信息。

如果您只是加载网站并经常按下标签按钮以聚焦其中一张图片，那么灯箱也会打开。

【讨论】：