HTML&CSS：实现WWDC 2015上的动画效果

如代码看不清，可到：http://www.taidous.com/article-611-1.html?_dsign=d42ba48b

每年，苹果都会召开一次重大的会议——全球开发者大会（WWDC）。这对于iOS开发者和OS X开发者而言，是学习苹果先进高科技以及移动设备与桌面软件新概念的绝佳机会。每一年的这个时候，苹果都会带来诸多新创意。今年，我被一个用简单圆圈和形状制作的图标所惊艳，于是决定使用HTML和CSS来实现它。

WWDC 15邀请卡

苹果的图标通常会采用颜色和形状叠加的方式，例如iOS 7的Photos图标。今年WWDC的邀请函使用了一个独特的图标，它由一系列层叠且半透明的形状构成，非常适合用HTML和CSS来实现。

HTML结构设计

设计这样一个复杂的图标需要进行一定的分析。首先，将其分解成各个部分。从大的方面来看，它主要由三种形状构成，其中主要图形是8个大圆。为了使代码更加整洁，我将其分割成几个类，这样方便后续把large、circle等类提取出来单独编写样式。

接着，有8个小形状位于大圆之上，这些小形状由4个圆形和4个带圆角的方形组成。我使用circle、squircle以及数字1到8为各个div设置类名，这样在后续设置形状和颜色时会更加便捷。

最后，将两个大方形放置在logo中间，同样使用了large和squircle类。

Logo和内容

接下来，为中间的方形添加内容。这里使用了一个SVG图片以及邀请函的内容。邀请函的字体原本是San Francisco，但该字体并非OS X的标准字体，所以我将其替换为Helvetica Neue Light。

样式编写

圆和方块样式

首先，编写circle和squircle的样式。由于大部分形状较大，所以将默认值设置得较大。每个元素的定位采用absolute，并添加一个白色边框。虽然边框可能与邀请函不完全一致，但可以为形状增添一些光泽。

然后，为大圆添加样式，将border-radius设置为50%，并使用left和top值来设置其位置。此时，所有的圆都处于同一位置。我们可以通过改变transform-origin的值来调整位置，默认的transform-origin值为（50%，50%），这里将其设置为圆的底部，然后稍微旋转一下，即可呈现出所需的形状。

仔细研究邀请函的图片，可以发现一个圆位于左下角，根据这一点可以计算出其他圆的旋转角度。每个块都有特定的颜色和旋转角度，下面的动画动态展示了生成过程。

有了上述原型后，为其他形状编写样式。方形可以看作是具有不同圆角的圆，在定位好圆之后，为其设置特定的旋转角度和颜色。相同的形状可以使用相同的样式，同时将小形状设置得更小，并使其离中心更远，采用与大圆相同的方法进行处理。

小方块样式

小方形的角度需要调整，需要将其旋转45deg。这里有两种实现方法：一种是为每个方形添加一个额外的元素并进行旋转；另一种是使用CSS中的伪类。我更倾向于使用伪类的方法。首先，去掉背景颜色、边框和盒子阴影，然后使用::after伪类创建一个相同的方形并旋转45deg。

内容方块样式

两个大方形包含了所有内容，将它们定位到中间，并设置一个较深的透明色。还可以对第一个大方形进行旋转。

添加动画

最初的邀请函是静态的，但我们的目标是实现动画效果。为了将每个集合分开，使用span元素将它们分别包裹起来，然后将动画应用到span元素上。

首先，对span元素进行定位，防止它们溢出。将每个span元素定位到中点，然后将动画应用到每个span元素上。使用相同的keyframes，但改变动画时间，分别设置为10s、20s、30s，这样它们会在一分钟后回到原来的位置。keyframes的开始位置旋转角度为0，最终旋转角度为360deg。

重用CSS

这是一次有趣的实验，最大的收获是实现了CSS的重用。旋转和小形状使用相同的CSS，所有的动画都使用同一个keyframes，这有助于压缩CSS文件的大小，保证页面的加载速度。

前缀处理

在创建这个例子时，我使用了autoprefixer，这样就无需每次编写动画时都考虑不同浏览器内核的前缀问题。