文章关键字 ‘polygon’

万物皆可clip-path,纯CSS绘制0-9数字

2022年07月27日,星期三

封面图,书籍和咖啡

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

阅读全文…

巧借CSS var变量实现任意的CSS自定义语法

2020年10月11日,星期日

CSS变量的自定义语法技术

本文介绍一种自定义任意CSS语法、以及Polyfill CSS新特性的技术,这个技术的精华之处就是巧用CSS变量var让这些浏览器本不应该识别的语法也认为是合法的,从而让JS进行解析识别与转化成为了可能,本文通过3个案例演示该技术,希望可以对您的学习有所帮助。

阅读全文…

SVG任意图形path曲线路径的面积计算

2020年06月3日,星期三

路径面积计算多边形占位图

我写了一段JS,用来计算SVG任意图形元素,或者path字符串路径对应的面积大小,直接复制粘贴就可以用,希望可以解决你的开发需求。

阅读全文…

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

2017年09月19日,星期二

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

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

阅读全文…

CSS3 clip-path polygon图形构建与动画变换二三事

2015年03月26日,星期四

本文絮絮叨叨CSS3 clip-path polygon在图形构建和动画这块的三两事,没什么惊天动地的知识点,大家可以当散文看下。放心,有demo有截图有代码展示,还有视频播放呢!总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…