参考链接: https://justforuse.github.io/blog/zh-cn/2018/11/css-to-draw-olympic-logo/
如何使用CSS绘制奥运五环?
第一反应是使用border-radius: 50%
再加上z-index
设置层叠关系不久可以了吗?
然而,怎么可能会说这么常见的问题呢?
稍加思考,原来他的层级不是叠加,而是有重叠的部分:
所以单纯使用z-index
并不能达到效果。
想到之前看到的一篇文章,如何实现元素穿插的效果:
https://css-tricks.com/1-element-css-rainbow-gradient-infinity/
其中的一个demo:
https://codepen.io/thebabydino/pen/MGqgyM
此处实现元素穿插效果的方式为添加transform:rotate
样式。
以此为基础,为每个圆环添加transform: rotateY( -1deg | 1deg)
就可以写出五环效果:
代码地址:
https://jsfiddle.net/justforuse/35muv9ar/
打不开可以试试codepen: https://codepen.io/justforuse/pen/MMwWYO