每一年，苹果都会举办一场大型发布会。WWDC（AppleDeveloperConference）是iOS开发者和OSX开发者了解Apple先进的高科技以及移动设备和桌面软件新概念的好机会。每年这个时候他们都会想出很多新点子，今年我被一个由简单的圆圈和形状组成的图标所震撼，所以我决定用HTML和CSS来实现它。WWDC15邀请卡Apple的图标通常使用颜色和形状叠加，例如iOS7的照片图标。今年的WWDC邀请函使用了以下产品。它由一系列层叠和半透明的形状组成，非常适合HTML和CSS。HTML设计这么负责任的事情，需要稍微分析一下。首先，我把它分解成几个部分。从一般的角度看，它是由三个形状组成的。主要人物是8个大圆圈。我先列一下：这里我会分成几类，方便后面提取大、圆等类单独写。代码会更简洁。然后我们在大圆上有八个小形状，这些形状由4个圆和4个正方形组成，正方形是圆角的，我这样写HTML我使用圆、鼠形和数字1到8用于每个div集类名。这样做的好处是方便以后给它们设置形状和颜色。***我们在标志中间放了两个倒过来的大方块。同样，我使用了大号和松鼠形。徽标和内容接下来我们向中间的正方形添加一些内容。这里我们使用SVG图像和邀请的内容。邀请函的字体是SanFrancisco但是字体不是OSX标准的，所以这里我换成了HelveticaNeueLight。编写圆形和方形样式我要做的第一件事就是写好圆形和鼠形样式。大多数形状都太大了，所以我将默认值设置为大。每个元素都是绝对定位的，并且有一个白色的边框。边框可能与请柬不完全相同，但可以使形状更加闪耀。接下来我们给大圆圈设置样式，设置border-radius为50%，使用left和top值来设置位置。此时，所有的圆圈都在同一个位置上。我们使用一个小技巧，通过transform-origin的值来改变位置。默认的transform-origin值为(50%,50%)，这里我们把值设置为圆的底部，然后稍微旋转一下，形状就出来了。让我们为每个圆圈添加CSS样式。仔细看邀请函的图片，我们可以看到左下角有一个圆圈。知道了这一点，我们就可以写出相对于圆的其他旋转角度。每个块都有一种颜色，并旋转一定角度。下面的动画动态演示了生成过程。使用上面的原型，我们为其他形状编写样式。首先，正方形也可以看做是圆角不同的圆。当我们定位圆圈时，我们给它一个特定的旋转和颜色。令人高兴的是，相同的形状也可以使用相同的样式，我们为小形状编写样式。我们将这些形状做得更小并且离中心的距离更远。并使用与上述相同的技巧。#p#小方块小方块的角度不对，需要旋转45度。这里有两个选项，我们可以在每个正方形中添加一个额外的元素并旋转它，或者我们可以选择CSS中的伪类。两种方式都可行，但我更喜欢后者。首先，我们移除背景颜色、边框和框阴影。我们使用::after伪类创建一个相同的正方形，旋转45度。现在我们有了大圆圈和其他小形状。内容框两个大方块包含所有内容。我们将它们放在中间，并赋予它们更深的透明颜色。我们可以旋转第一个大方块。添加动画最初的邀请是静态的，但我们的网站名为CSSAnimationRocks是白叫的。我想分开每个集合。为此，我用span元素分别包裹它们，然后将动画应用到span元素。我们首先定位span元素以防止它们溢出。每个span元素都定位到中点。接下来我们将动画应用于每个span元素。我们使用相同的关键帧，但将动画时间更改为10秒、20秒、30秒。所以他们在一分钟后回到原来的位置关键帧如下所示，起始位置旋转角度为0，最终旋转角度为360deg。重用CSS这是一个有趣的实验，但我认为最大的收获是重用CSS。旋转和小形状使用相同的CSS很方便。所有动画都使用相同的关键帧。这有助于压缩CSS文件的大小并确保加载速度。在创建这个示例时，我使用了autoprefixer，这样我就不必在每次编写动画时都考虑浏览器内核。
