Page 250 - css揭秘

图 8-29
naxos-greece.jpg 这张图片的完
整样貌；我们在本篇攻略中会一
直用到它（照片拍摄者为 Chris
Hutchison）

现在，它看起来如图 8-30 所示，没有任何动画效果或交互效果。接下
来，我们可以试试手动改变它的 background-position 属性值。实际上当
这个值从原本的 0 0 一直变化到 100% 0 时，我们就会看到这张图片从左侧
一直滚动到右侧的完整过程。这不就是我们需要的动画关键帧嘛！

@keyframes panoramic {
to { background-position: 100% 0; }
}

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
}

这个方法立竿见影。它的效果有些像全景视图，仿佛身临其境环顾左 图 8-30
右。不过，这个动画是在页面加载后就立即触发的，在某些场景下这很可能 这张图片被裁切后的效果
会干扰到用户。比如说，在一个旅游网站上，用户可能想集中注意力去阅读
纳克索斯岛的说明文字，而不是一直观赏这张全景图片。因此，如果动画是
当用户鼠标悬停时才开始播放的，那效果就更加理想了。于是，我们接下来
又迈出了这一步：

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
}

.panoramic:hover, .panoramic:focus {
animation: panoramic 10s linear infinite alternate;
}

当我们把鼠标悬停到图片上时，它真的达到了我们的期望：它会从图片
的最左侧区域开始，向右慢慢滚动，并逐渐显示出图片的右侧区域。不过，
当我们把鼠标移出图片时，它就会生硬地跳回最左侧（参见图 8-31）。我们
终于碰到本节开头所描述的那个问题了！

46 状态平滑的动画 219

඀ࠡ JOEC