对于剪切动画，使用clip-path代替width/height，避免DOM重排导致性能过低。除了使用transform3d开启gpu加速，还可以使用will-change强制gpu加速优化动画性能。其余还有padding上下撑高、display: tab

刷新 QQ 空间动态时，发现一则广告，随着用户上下滑动动态列表，就会自动切换广告图片，这样的效果对移动端本就不大的屏幕来说，无疑是很精妙的考虑，这样的效果是怎么实现的呢？在图片容器的左上角或右下角选取一个圆心，绘制一个圆，不断加大圆的半径来显示第二张图片；

在之前所提到绘制正多边形的方法，算是纯粹利用伪元素来完成，不过坦白说还有另外一种方法，可以将单一div做更多形状的变换，这种方法就是CSS3的“clip-path”，这个“clip-path”看起来有点眼熟，因为它原本就存在于SVG里头，利用掩码（剪裁）的

写过 HTML upvote arrow，speech bubble或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。不得不说，这些 CSS Hack

clip-path的使用polygon值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为原点，右下角是的点。<p>定义半径的时候可以用at关键字来定义坐标。ellipse值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。

创建剪切动画对于剪切动画，使用clip-path代替width/height，避免DOM重排导致性能过低。}优化动画性能除了使用transform3d开启gpu加速，还可以使用will-change强制gpu加速优化动画性能。子元素需要文字截断，为了兼容4

Susy 2 教程 — 入门篇关于Susy Susy 是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。它的能力正如官网的简介一样强大： Your markup, your design, your opinio

曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。好在CSS3时代的到来，尤其是CSS3在借鉴并增加了众多SVG属性的今天，使用纯CSS绘制一个多边形已经不再是什么难事。文章中要介绍的clip-path这个

相信大多数前端同学在面试或者学习的时候都遇到过使用 CSS 绘制正方形、三角形等基础图形的问题，各种奇技淫巧想必大家都运用得比较熟练。本文则介绍了使用 CSS3 中提出的 clip-path 来解决该问题的方法。clip-path，顾名思义，可以创建一个只