最近，在做一个比较大的网站，主要服务于欧美地区，全站为英文版本，因为是电子产品，因此，要展示产品内在美（扯个蛋！）仿照小米、錘子、苹果等网站，着重于css3动效效果，搜集整理了一些网站中用到的动效图，方便以后翻阅。

所有页面的动效依照 anicollection 动效来实现

• 旋转菜单

1. 所有图标使用了：font-awesome.min.css
2. 所有图片的跨度调整显示跨度 40deg 为一个跨度，360/9
3. 从第二个图标开始延迟上一个图标的2倍时间
4. 所有图标都在在上一个图标的基础上增加 40deg，目的是让图标都垂直居中显示

代码效果：demo

 

•  Tab 页内容：从右往左移

1. 显示的tab内容区的宽高使用 vw / vh；
2. 动画名称及动画效果实现，均以 class 命名；
3. 水平方向，由右向左移动，使用了 transform: translate3d(100%, 0, 0) -> transform: translate3d(0, 0, 0)，由100%移到了0%，圆点为 0，长度为100
4. 通过控制 tab内容区 class 来实现平滑左移效果

代码效果：demo