它由一些列层叠和半透明的形状构成，非常适合用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实现WWDC2015上的动画效果的详细内容...