
抽几个小时使用 clip-path 绘制了一套 CSS 数字,可任意免费使用,大家自取。

本文介绍一种自定义任意CSS语法、以及Polyfill CSS新特性的技术,这个技术的精华之处就是巧用CSS变量var让这些浏览器本不应该识别的语法也认为是合法的,从而让JS进行解析识别与转化成为了可能,本文通过3个案例演示该技术,希望可以对您的学习有所帮助。
iPhone X造型上有个显著的特质,就是有个明显的刘海。
然后,也出现了一些酷酷的交互,例如页面滚动的时候,列表会自动绕着iPhone X的刘海排列。看微博评论,好像觉得这个效果实现很难,实际上,CSS3里面针对这种特定形状环绕的效果已经支持很久了,CSS3 Shapes和CSS3 Regions都是可以实现的,本文就将展示如何使用CSS3 Shapes实现元素内容在滚动的时候自动环绕iPhone X的齐刘海的效果。
本文絮絮叨叨CSS3 clip-path polygon在图形构建和动画这块的三两事,没什么惊天动地的知识点,大家可以当散文看下。放心,有demo有截图有代码展示,还有视频播放呢!总之,希望本文的内容能够对您的学习有所帮助。