CSS3

高性能 CSS3 动画优化指南

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。

关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。

然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。

目前对提升移动端CSS3动画体验的主要方法有几点：

尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

-webkit-transform: translate3d(0, 0, 0);

-moz-transform: translate3d(0, 0, 0);

-ms-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

查看全文

2015/02 01 周日

前言

响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。

1、特殊的meta 标签

现在我们用的智能手机（iOS，Android）的浏览器都是基于webkit内核，由于webkit的浏览器对于html5的支持比较好，所以我们在声明头部的时候最好用html5的声明方式。标签中可以设置具体的宽度（如像素值）或者缩放比例如2.0（设备实际尺寸的两倍）。查看全文

2014/11 05 周三

前言

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。

你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章

事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-letter, ::selection, :before and :after。但是，就本文而言，我们将把我们探讨的范围限制在:before 和 :after这两个元素上。因此，本文中的“伪元素”将特指这两个伪元素（:before 和 :after），我们将从基础入手，来研究这个独特的主题。查看全文

2014/10 21 周二

纯CSS3实现loading进度加载效果

简介

纯CSS3实现GIF图片进度加载效果，我们经常会用gif图片在做加载进度动画，如今我们可以用纯CSS3来实现相同的效果，CSS3实现加载动画可以节省图片加载时间。

效果图

查看全文

2014/10 10 周五

图片模糊滤镜效果实现方案

前言

最近很流行图片高斯模糊处理，让网站的图片看起来有高大上的效果。应用点：如网站Banner、大气背景图等。模糊背景（blurred backgrounds）是一个很常见的设计效果，也被称为背景虚化，在网页和App的设计中屡见不鲜。虚化的界面设计直观的给人一种干净自然的视觉感受，因此，模糊背景的基调会使整个界面看起来更柔美。合理运用虚化背景可以将界面效果提高一个档次。