Page 253 - css揭秘

类似的例子还有很多，不一而足。可是，我们怎样才能用 CSS 来实现
这样的效果呢？
接下来要讨论的是一个非常简单的例子，我们会让一幅头像图片沿着
环形路径动起来，可以看作是上述 Google+ 效果的简化版本。结构代码是
这样的：
HTML
<div class="path">
<img src="lea.jpg" class="avatar" />
</div>

在开始考虑动画之前，我们先给它加上一些基本的样式（比如尺寸、背
景、外边距等），这样它就会变成图 8-35 中的样子了。这些样式是相当基
础的，这里就不详细展开了，但如果你对此还有一些疑问的话，可以自己研
究一下后面的示例链接。有一点需要我们牢记在心：这条环形路径的直径是
1①
300px，因此半径就是 150px 。
在添加完基本的样式之后，我们就要开始思考动画了。我们希望这个头
像顺着外围的橙色大圆以转圈的方式进行移动。如何利用 CSS 动画来达到
这个目的呢？当这个问题拦在面前的时候，很多人可能会不加思索地写出下
图 8-35 面的代码：
在应用了一些基本的样式之后，
我们的起点就是这样的。现在我 @keyframes spin {
们可以放手玩一玩 CSS 动画了 to { transform: rotate(1turn); }
}

.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = 路径的半径 */
}

这一步迈出的方向是正确的，但问题在于，它不仅让头像沿着环形路径
转动，同时还会让头像自身旋转（如图 8-36 所示）。比如说，当头像转了半
圈的时候，是头朝下的。如果有文字的话，那文字也会是颠倒的，这在可读
性方面可是一个严重的问题。因此我们希望它只是沿着环形进行移动，同时
保持自己本来的朝向。

图 8-36
这几张静态截图说明我们迈出的
第一步还不够成功

① 如果你还不确定如何用 CSS 来生成环形，请参阅“自适应的椭圆”。

222 第 8 章 过渡与动画

඀ࠡ JOEC