进度圈(Progress Circles)是经典的仪表盘元素，可以将统计数据直观地展现为摘要视图。我们可以通过JavaScript和Canvas渲染，再配合CSS，图片或者利用SVG实现一个进度圈。使用SVG实现一个进度圈并没有想象中那么难，我们先从基本的开始。

你可能已经听说过PostCSS,它比libsass快了几乎两倍(并且比Ruby Sass快了28倍)；或者听说过它支持cssnext和CSS Modules而且可扩展功能,但你是否已经找机会尝试一下了？PostCSS最强大之处在于它是模块化并且基于插件的架构，不过这也是个缺点。如果你之前在项目中使用Sass(比如大多数的设计师和前端开发者)，你从不需要配置任何东西——Sass内置了全部实用功能，开箱即用。然而，PostCSS需要你做一些配置。你不得不从一眼看不到底的插件列表选择插件并且自己把全部插件一起配置。

先有UI动画，然后才会有好的UI动画。好的动画会让人惊叹“哇哦！”——因为页面看上去很流畅、很漂亮，最重要的是，自然，一点都不会让人觉得不和谐或者僵硬死板。如果你经常逛Dribbble或者 UpLabs这类网站的话，你就会明白我在说什么了。

同HTML元素一样，我们可以通过transform函数操作SVG元素。然而transform在SVG元素和HTML元素上的工作方式会有一些差别。首先，IE不支持SVG元素的CSS transform属性，但是如果只是应用一些2D变换，为了适配IE,我们可以使用SVG的transform属性。SVG的transform属性中的所有函数的参数只能是纯数字，比如说，我们不能在translate函数中使用%单位（虽说在火狐浏览器中的CSS transform属性也不能使用—此处有链接—），rotate，skew角度只能使用deg单位，我们能在CSS transform属性中可以使用的所有其它单位在这里都不能使用。

由于 React 加持了虚拟 DOM 等诸多特性，所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑，只会简单地演示如何在 React 创建动画效果，因为我也没有做过线上的 React 动画实例，谨以此文抛砖引玉，算是最基础的入门了解。

前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现，有些手机的动画会“快”一点，有些手机的动画会“慢”一点，有些慢得还不是一两点。通过查找资料发现，基于帧的算法（Frame-based）来实现动画会导致不同帧率的平台体验不一致，而基于时间（Time-based）的动画算法可以很好地改良这种情况，让不同帧率的情况下都能达到较为统一的速度上的体验。本文介绍的就是基于帧动画算法和基于时间动画算法的差异，以及对基于时间算法的改良。

CSS3在选择器方面添加伪类选择器这方面的特性，比如:nth-child(n)、:nth-of-type(n)这样的选择器，其好处在这里就不多说了。如果你对这方面感兴趣的话，你可以阅读早前整理有关于CSS选择器方面的《CSS3 选择器:伪类选择器》一文。而今天我们要说的是在Sass中如何更灵巧的使用CSS3的一些伪类选择器。

CSS现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

如果你已经对CSS有了一定的了解，也许你之前已经掌握了一些字体加载的方法，那么你使用过font-display吗？font-display是CSS中新添加的属性，它能实现之前类似于Font Loading API和Bram Stein's Font Face Observer这种第三方脚本实现的功能。如果这是你第一次接触这类知识，那也没有关系，我们会先简单介绍一下浏览器加载字体的默认方法。

上周看到有一篇关于CSS滤镜效果函数的文章，其中的效果函数相对来说比较容易理解，而且上手难度低。但是，这种方式仅仅是添加CSS滤镜效果众多方式中最弱的一种。今天让我们来看一看滤镜基元，这是为图片和元素添加滤镜效果另外一种更加强大的方法。