Web技巧(08)

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前段时间看到群里有不少同学在讨论,目前阶段哪些交互行为可以直接使用CSS来实现,而不再依赖JavaScript。后来想想,这应该也是一个值得我们探讨的话题,后来一想,要不这一期我们就来聊聊,哪些交互行为,可以不再依赖JavaScript,直接使用CSS来实现。

CSS Slider

Slider效果在Web中是非常常见的一种效果,像Swiper这样的库是一个非常优秀的库,用于实现Slider效果最好不过了。如果我们抛开JavaScript使用纯CSS也可以实现一些简单的Slider效果,不同的是要实现自动播放会有一定的难度。

通过<a>链接的锚点来实现。除此之外,还可以配合input[type="radio"]、CSS的:target选择器

如果我们想要实现一个自动播放的效果,需要配合CSS的animation相关的特性一起来实现,比如下面这个示例:

如果不是自播放的Slider,CSS实现方案有很多种,对于自动播放的,那么就需要具备animation和Web动画相关的知识。随着滚动特性滚动捕捉特性越来越完善,对于CSS实现Slider的效果会越来越完美。

有关于CSS实现的Slider效果更多案例,可以点击这里查阅

CSS Accordion

使用CSS实现手风琴的效果和实现Slider的效果类似,可以通过[input type="radio"]:target:hover等方法来实现。比如下面这个效果:

如果你不想太纠结或者说徒手撸一个手风琴效果的话,也可以尝试着使用在线的生成工具,比如CSS Accordion Slider就蛮不错的:

有关于CSS手风琴更多的效果可以点击这里这里查阅。

实现Accordion的效果除了CSS之外,还有一个更优秀的方案,那就是采用HTML5的<details><summary>标签,比如下面这个案例:

有关于<details><summary>更详细的介绍可以阅读《借助HTML5 details,summary无JS实现各种交互效果》一文。另外,这两个标签结合在一起还可以实现一些其他的交互效果

CSS Modal

模态弹出框也可以使用:target或借助radiocheckboxchecked来完成:

同时还可以借助animation.css中提供的animation效果,让Modal的出现和隐藏带有一些动效。比如像Light Modal提供的效果

有关于CSS实现Modal的更多效果可以点击这里查阅

CSS Tabs

原理是一样的,:targetchecked配合~一起。有关于CSS实现Tabs更多的案例可以点击这里

CSS Tooltips

提示框通常是借助CSS状态选择器中的:hover:focus来实现,也是非常常见的一个效果:

如果要实现点击显示或隐藏提示框,那还得借助checkboxradiochecked来完成。除此之外还可以使用:focus-within来实现提示框的效果

有关于Tooltip更多的效果可以点击这里查阅

CSS Dropdown Menu

下拉菜单,采用:hover实现下拉菜单已是很经典的技术了,比如下面这个效果:

现如今可以使用:focus-within实现Off-screen导航菜单的效果:

前面提到使用<details><summary>来实现手风琴的效果,其实使用这两个标签也可以很好的实现下拉菜单的效果。

有关于下拉菜单更案例可以点击这里查阅

CSS Range Slider

上一期中的末尾提到了HTML5的<meter><progress>实现进度条的效果:

对于滑块的效果,可以直接使用<input type="range" />来实现:

@Ana Tudor在她的《A Sliding Nightmare: Understanding the Range Input》一文中详细介绍了如何使用<input type="range">,有兴趣的同学可以看看。

我们也可以使用CSS的mask相关的特性,让Progress的效果更美:

有关于滑块更多的效果可以点击这里查阅

CSS Star Rating

评分系统,也可以使用CSS来完成,不过需要配合inputchecked一直处理:

有关于评分系统更多的案例可以点击这里查阅

CSS Scrollbar

在Webkit内核下,可以借助Scrollbar相关的伪元素选择器实现自定义滚动条效果:

小结

文章中提到的这些效果,在以往较多情形之下,或者说一定得依赖JavaScript一起才能完成。随着CSS特性越来越强大,以前很多常见的Web效果(交互效果)就可以使用纯CSS来完成。上面是我能想到的一些常见效果,效果中常用到的是:target:focus-withininputchecked~(或+)选择器来完成。虽然CSS能实现这些效果,但对于HTML的结构有较强的要求,如果结果没有写好,要实现这些相应的交互效果就较为困难。另外,HTML5的一些新标签也能很好的帮助我们实现一些效果,比如使用<details>实现手风琴,下拉菜单等效果,使用type="range"progressmeter可以实现一些进度条和滑块的效果。

如果您在这方面有相应的经验,欢迎在下面的评论中与我们一起分享。

如需转载,烦请注明出处:https://www.w3cplus.com/css/web-tips-2019-06-01.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部