巧用 CSS 的 :target 选择器,打造没有 JS 的 UI 效果

除了链接到新页面,链接元素(<a> 标签)还可以引用到某章节、片段或其它同页面元素,而这几类链接普遍运用于同一页面的导航。

CSS 伪类选择器 :target 是文档内部链接,通过链接元素的 href 属性指定页面某部分,然后选择和为目标元素添加样式的。例如,如果你有一个锚点标签是链接到一篇文章的“深度阅读”部分…

…点击锚点链接后,你可以使用 :target 选择器强调目标元素,以引导阅读者眼球。该高亮技术是众所周知的褪黄技术,并在 37 Signals 首次使用。

这技术要求你使用 CSS animation 在短暂时间内显示颜色,然后再次移除颜色 – 要点是高亮能足以引导用户注意到这里。看看 展示了这项技术运作的在线案例

See the Pen ogBWmL by Sara Soueidan (@SaraSoueidan) on CodePen.

上面案例给链接的目标元素应用了短暂的样式。但如果你应用更持久的样式,你可以创建缩放元素、改变它们可见度等等。

最近,我在 自己网站 上运用了这项技术,当浏览者想搜素文章时,搜索域覆盖整个页面。作为主导航的一部分,有一个链接是让搜索域覆盖整个页面 – 一个包含着搜索输入框的 <div> 标签。

这个搜索域初始时是通过使用 opacity : 0; 进行隐藏的。并通过 position : fixed; 让其相对于视口进行定位。为了确保它不会挡住它下面其余页面的鼠标事件,设置 pointer-eventsnone.

使用 :target 选择器后,一旦搜索锚点被点击,覆盖域就会显示,并将 pointer-event 再次设置为 auto。 为了让覆盖域显示过程更流畅,可通过 CSS3 的 transition 创建一个淡入淡出的效果。

搜索域淡入。任务完成一半 – 当用户再次请求时,我们需要确保它能淡出。

该覆盖域容器需包含其它允许我们回到主页面的链接。因此,我们打算给 bodyhtml 元素一个 ID,并有一个关闭按钮链接到该 ID —这也能达到目的。然而,没有必要这样做。因为链接到非特定片段,只需将 # 作为它的值。实际上,无须为页面上的 URL 添加任何片段标识符,就能链接到主页面。

一旦关闭按钮链接被点击,我们希望搜索域淡出,所以我们为 #search-overlay:target 再次添加 transition ,并确保 opacity 能过渡到 0。  当然,如果想在用户关闭它时,让它立刻消失,你可以忽略这一步。

看看这个 在线案例

你可以为搜索域添加变形动画,进一步增强效果。例如在淡入时伴随着放大效果 – 类似于(是的,你应该猜到了) Lightbox  效果。搜索域中不是搜索表单,而是一张图像的话,当你点击它的缩略图时,它会伴随能放大效果进入你的视线。Manoela Ilic 有一个很细致完整的图片 画廊 ,它就是基于这个效果做的。并且在它后面有一个教程,解释代码的运行。

Christian Heilmann 也写了一个关于如何使用 :target 选择器创建简易图片画廊的 帖子,并值得我们学习。

只使用 CSS 实现的图像画廊模拟框 和 off-canvas 导航 都是功能齐全的 UI 组件案例。通过利用 :target 选择器的优势,它们只需使用 CSS 就可以完成。

我希望通过这篇文章的介绍,在你需要为目标元素添加样式时,CSS 伪类选择器能成为你实现方式之一。

更多教程和惊喜!

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 5 收藏 评论

关于作者:刘健超-J.c

前端,在路上...http://jchehe.github.io 个人主页 · 我的文章 · 19 ·     

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部