Page 252 - css揭秘

47 沿环形路径平移的动画

背景知识
CSS 动画，CSS 变形，“平行四边形”，“菱形图片”，“闪烁效果”

难题

几年前，当 CSS 动画横空出世时，大家都兴奋不已。当时 Chris Coyier
（http://css-tricks.com）问我有没有办法用 CSS 动画来让一个元素沿着环形路
径动起来。刚开始的时候，我以为这只是一道好玩的 CSS 练习题，但后来
才发现，有不少实际案例真的会用到这个效果。举例来说，Google+ 就用到
了这样的动画效果：当一个圈子的成员数量超过 11 但仍有新成员加入时，
已有成员的头像会在环形路径上转动，并为这个新成员腾出空间。
图 8-33
在俄罗斯的一家技术网站 habrahabr.ru 上，我们还可以看到另一个有
Google+ 在展示新成员加入“圈
趣的例子（参见图 8-34）。和其他所有经过精心设计的网站一样，它的 404 子”的动作时，使用了一个基于
页面也提供了一个导航菜单，引导用户跳转到网站的几大核心页面。它别出 环形路径的动画效果
心裁的地方在于，把各个菜单项设计成了一颗颗在环形轨道上运转的星球，
并在菜单上方打出标语“飞向宇宙中的另一颗星球”。每颗星球都附有一行
注解文字，因此这些星球在沿着环形轨道进行移动的同时，需要保持自身的
角度不发生变化，否则它们的注解文字就会飘乎不定、很难看清。

图 8-34
俄罗斯技术网站 habrahabr.ru 的
404 页面

47 沿环形路径平移的动画 221

඀ࠡ JOEC