纯CSS 实现 Lightbox 灯箱效果

浏览: 29 发布日期: 2016-11-28 分类: html

效果预览:(有防盗链,麻烦手动复制到新窗口打开)

用伪类 :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...

返回顶部