文章关键字 ‘shape-outside’

借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

2017年09月19日,星期二

iPhone X造型上有个显著的特质,就是有个明显的刘海。

然后,也出现了一些酷酷的交互,例如页面滚动的时候,列表会自动绕着iPhone X的刘海排列。看微博评论,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。

阅读全文…