用HTML和CSS实现WWDC 2015上的动画效果

用HTML和CSS实现WWDC 2015上的动画效果

动画效果WWDC 2015

 

原文：https://cssanimation.rocks/wwdc15/

译者：周晓楷（@Helkyle）

---

每一年，苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。

每年的这个时候，他们都会制造出不少新创意，今年，我被一个用简单圆圈和形状制做出来的图标所惊艳，因而我决定用HTML和CSS来实现它。

WWDC 15邀请卡

---

苹果的图标一般都会使用颜色和形状的叠加，好比iOS 7 Photos图标。今年WWDC邀请函用了下面这货。

它由一些列层叠和半透明的形状构成，很是适合用HTML和CSS来实现。

HTML

---

设计这样一块负责的东西须要稍微分析一下。首先，我把它分解成各个部分。 大方向看它是由三种形状构成的，主要图形为8个大圆，我先把它们列出来：

这里我分割成几个类，这样作方便后面把large,circle,等类提取出来单独写，代码会整洁不少。

而后咱们有八个小形状，处于大圆的上边，这些形状由4个圆形和4个方形构成，方形是由圆角的，我这样写HTML

我用了circle,squircle以及数字1到8来为各个div设置类名，这样作的好处是，后面为它们设置形状和颜色的时候很方便。

最后咱们把两个大方形反倒logo中间。

一样，我用了large和squircle。

Logo和内容

---

接下来咱们给中间的方形增添点内容。

这里咱们用了一个SVG图片，还有邀请函的内容。邀请函的字体为San Francisco 可是字体不是OSX标准的，因此这里我换成Helvetica Neue Light。

写圆和方块样式

---

我要作的第一件事是把circle和squircle的样式写好。

大部分形状是大得，因此这我把默认值设大了。每一个元素的定位都是absolute而且有一个白的边框。边框可能不会跟邀请函的如出一辙，可是能够给形状多点光泽。

接下来咱们给大圆加上样式，设置border-radius为50%，而且使用left,top值设置位置。

这个时候全部的圆都是在同一个位置上边。咱们使用点小技巧，经过transform-origin的值来改变位置。默认的transform-origin值为（50%，50%），这里咱们把值设为圆的底部，而后咱们稍微旋转一下，形状就出来了。

让咱们给每一个圆添加CSS样式，仔细研究邀请函的图片，咱们能够看到一个圆的位置在左下角。知道了这一点，咱们就能够写出其余与圆圈的旋转角度。

每一个块都有一个颜色，而且旋转必定角度。下面的动画动态展现了生成过程。

有了上面这些原型，咱们给其余形状写样式。首先方形也能够当作有不一样圆角的圆。

当咱们定位了圆之后，咱们给了特定的旋转角度和颜色。高兴的是，相同的形状也可使用相同的样式，咱们写好小形状的样式。

咱们把这些形状设得小一些，而且离中心更远的距离。而且使用跟上面相同的诡计。

小方块

---

小的方形角度错了，咱们须要给它旋转45deg。

 

这里有两种方法可供选择，咱们能够给每一个方形加多一个额外的元素，并旋转，或者咱们选择CSS中的伪类。两种方法都行，不过我更倾向于后者。

首先咱们把背景颜色，边框，盒子阴影去掉。

咱们使用::after伪类来建立一个相同的方形，并旋转45deg。

如今咱们有了大圆和其余小形状了。

内容方块

---

两个大的方形包含全部内容，咱们把他们定位到中间，而且给他们一个比较深的透明色。

咱们能够旋转一下第一个大方形。

添加动画

---

最初的邀请函是静态的，可是咱们的网站叫作CSS Animation Rocks可不是浪得虚名。

我像把每一个集合分开，为了作到这一点，我用span元素把它们分别包裹起来，后面就把动画应用到span元素上便可。

 

咱们先给span元素定位，防止他们溢出。

每一个span元素都定位到中点。

接下来咱们把动画应用到每一个span元素上面。

咱们使用了相同的keyframes可是改变了动画时间，分别为10s,20s,30s。因而他们一分钟后回到原来的位置

keyframes 以下所示

开始位置旋转角度为0，最终旋转角度360deg。

 

重用CSS

---

这是个有趣的实验，可是我以为最大的收获是重用了CSS.旋转和小形状使用相同的CSS很方便。还有全部的animation用了同一个keyframes。这样有助于压缩CSS文件的大小，保证加载速度。

前缀

---

建立这个例子的时候，我用了autoprefixer，这样就不用每次写动画都要考虑浏览器内核了。