效果预览:(有防盗链,麻烦手动复制到新窗口打开)
用伪类 :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手风琴效果 等),有兴趣的可以看看: