其实网上对于制作五环有过例子,但是那些例子写的比较晦涩 而且注解不容易看懂,原理跟我的稍微有些差别
我做了简化,代码量偏少。
用了CSS3 的:after伪类
实质上我感觉:after用在这里并不好用
原因有:
1. jquery无法选择这个伪类,比如$(".round:after")没法选择得到东西
2. jquery无法选择的话,对于这个伪类的操作就不容易实现,比如动态调整css等,只能绕弯路(给head append一个<style>)
3. 在chrome开发工具里 看不到这个伪类 ,实质上没有把它当做一个元素处理。
所以:before 和 :after 其实还是尽量少用,只在简单排版里用。
尽管如此,还是跟很多范例一样,用了:after。
五环制作原理如下
1.五个并列的圆,不设置任何index
2.五个圆和别的圆重叠交叉的部分,预留缺口,border-right-color:transparent
3.用:after制作一个新元素 填补这个缺口,灵活调整这个缺口的z-index来实现交叠
演示效果如下,也可以猛击这里:http://jsfiddle.net/crabyan/6tg5Z/
这个version是缺口做成另外颜色的,比较容易理解思路:http://jsfiddle.net/crabyan/6tg5Z/41/