Page 254 - css揭秘

在当时，不论是我还是 Chris 都没有想出一个合理的办法。我们当时所
能想到的最好办法就是用大量的关键帧来模拟出环形的路径，而这显然从哪
个层面看都不是一个好主意。革命尚未成功，同志仍须努力啊！

需要两个元素的解决方案

那次讨论已经告一段落，但我心里其实一直没有放下。终于，在 Chris

提出这个挑战的几个月后，我交出了一份答卷。这个答案背后最主要的思路
与“平行四边形”或者“菱形图片”中提到的“嵌套的两层变形会相互抵
消”如出一辙：用内层的变形来抵消外层的变形效果。不过，这一次可不是
静态的抵消了，这次的抵消作用是贯穿于整个动画的每一帧的。需要注意的
是，跟上述两篇攻略一样，我们需要两层元素。因此，需要把原来清爽的
HTML 代码稍作处理，给头像套上一层额外的 div：

<div class="path"> HTML
<div class="avatar">
<img src="lea.jpg" />
</div>
</div>

我们把早先尝试的那个动画应用到 .avatar 这个容器身上。但现在的
效果仍然是图 8-36 中的老样子，因为这个元素自身仍然会旋转。不过，假
设我们对头像元素设置另一个旋转动画，让它以相反的方向自转一周，会发
生什么呢？这两层旋转的作用会在头像上相互抵消，我们只会看到父元素旋
转所产生的环绕动作！
不过还有一个问题需要考虑：我们当前所面临的并不是一个可以抵消
的静态旋转变形，而是一个在一定角度范围内连续运转的动画。举例来说，
如果角度是固定的 60deg，我们可以用 -60deg（或 300deg）来抵消它，如
果是 70deg，那我们可以用 -70deg（或 290deg）来抵消。但现在它可能是
0-360deg（或 0-1turn）的任意角度，那我们该用什么来抵消它呢？答案比
看起来要简单得多。只需把头像的动画设置为相反的角度范围（360-0deg）
即可，就像这样：

@keyframes spin {
to { transform: rotate(1turn); }
}
@keyframes spin-reverse {
from { transform: rotate(1turn); }
}

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

.avatar > img {

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

඀ࠡ JOEC