【巨人花园】第5回:使用CSS3制作常见JS特效

这个系列主要来自于Github上的一个项目?叫做“You don’t need JavaScript”。它的目的是想用纯CSS实现一系列常见的JS特效,要知道能使用CSS3做出各种特效的人一定是非常具有想象力和创造力的,这次的内容就是让我们来看看其中的一些效果的实现原理。

仓库名称:You don’t need JavaScript
仓库地址:https://github.com/you-dont-need/You-Dont-Need-JavaScript

手风琴

手风琴的效果对于我来说,比较容易联想到它实现的原理。
在慕课网上有一个课程,叫做css3实现网页平滑过渡效果,这个课程使用到的技巧其实也很相似。
为了做出手风琴切换的状态保留,我们可以借助radio input来帮助我们保留选中的状态。而只要把按钮的部分和radio进行一个位置的重合就可以达到这个效果。
要控制文字块是否显示,我们要尽可能的使用各种CSS选择器,比如~,选中此元素后的所有匹配元素的同级元素,和+

另一个问题就是高度的渐变效果。
如果从display:noneblock的话,transition的动画过渡会不起作用。opacity和visibility都会占有原来的空间。
所以我们可以让它的height0变到某一个高度。当然还需要设置overflow:hidden,要不然文字内容会溢出。
也可以设置max-height0,变为到max-height为另一个高度。
但如果设置值为auto,这个高度的变换是没有过渡效果的。

Carousel

Carousel的意思是旋转木马,其实就是一般的幻灯片啦。
这里很巧妙的地方在于,怎么完成点击上下切换的按钮而切换到对应的幻灯片?

我们可以在选中某个按钮radio input的时候,就把某个按钮对应的DIV层透明度显示出来。
但是对于上一张还有下一张的操作,这里其实是用了一些技巧。
每一个图片都对应有一个prev和next的label标签。我们在点击label标签的时候,如果使用了for属性,它可以让鼠标自动聚焦到对应的input里去。

美化CheckBox

类似的,我们利用input radio和之前的技巧,就可以做到美化Checkbox。这个小技巧之前我也用到了自己要负责做的一个筛选组件上,非常好用。
然而DEMO里面还有一个很有意思的地方,就是它能自动显示我们选中了几个checkbox。
用到了一个很“罕见”的CSS属性,在父容器加上:

counter-reset: characters;

在子容器加上:

counter-increment: characters;

这样可以进行一个编号!

.total::after {
  content: counter(characters);
}

可以引用这个结果,counter()可以算出它的接过来,然后就显示出来了。
这里再推荐一篇文章:https://blog.csdn.net/canglingyue/article/details/50587895

小结

到这里,其实其他效果都大同小异了,总结出来主要就是3个点:

  • 充分利用radio/checkbox原有的一些特性。
  • 充分利用伪元素。
  • 充分利用选择器。