每年，苹果都会召开一次重大的会议。WWDC(苹果开发者大会)是iOS开发者和OSX开发者学习苹果先进高科技和移动设备与桌面软件新概念的好机会。
每一年的这个时候，他们都会制造出很多新创意，今年，我被一个用简单圆圈和形状制作出来的图标所惊艳，于是我决定用HTML和CSS来实现它。
WWDC 15邀请卡
苹果的图标通常都会使用颜色和形状的叠加，比如iOS 7 Photos图标。今年WWDC邀请函用了下面这货。
它由一些列层叠和半透明的形状构成，非常适合用HTML和CSS来实现。
HTML
设计这样一块负责的东西需要稍微分析一下。首先，我把它分解成各个部分。 大方向看它是由三种形状构成的，主要图形为8个大圆，我先把它们列出来：
这里我分割成几个类，这样做方便后面把large,circle,等类提取出来单独写，代码会整洁很多。
然后我们有八个小形状，处于大圆的上边，这些形状由4个圆形和4个方形构成，方形是由圆角的，我这样写HTML
我用了circle,squircle以及数字1到8来为各个p设置类名，这样做的好处是，后面为它们设置形状和颜色的时候很方便。
最后我们把两个大方形反倒logo中间。
同样，我用了large和squircle。
Logo和内容
接下来我们给中间的方形增添点内容。
这里我们用了一个SVG图片，还有邀请函的内容。邀请函的字体为San Francisco 但是字体不是OSX标准的，所以这里我换成Helvetica Neue Light。
写圆和方块样式
我要做的第一件事是把circle和squircle的样式写好。
大部分形状是大得，所以这我把默认值设大了。每个元素的定位都是absolute并且有一个白的边框。边框可能不会跟邀请函的一模一样，但是可以给形状多点光泽。
接下来我们给大圆加上样式，设置border-radius为50%，并且使用left,top值设置位置。
以上就是用HTML和CSS实现WWDC 2015上的动画效果的内容，更多相关内容请关注微课江湖（）！