Page 249 - css揭秘

图 8-28
我是在做一个简单的网页时，下
定决心要为这个问题找到一个解
决方案的。我当时打算把这个网
页作为生日礼物送给我的朋友
Julian（http://juliancheal.co.uk）。
请注意右侧的圆形图片，这张图
片原本是横幅的。圆形区域显露
出的是图片的右半部分，而当用
户的鼠标移到图上时，它会缓慢
地向左滚动，从而显露出原先被
裁掉的部分。在默认情况下，当
用户把鼠标移开时，图片会生硬
地跳回原始位置，这很容易让人
误以为 UI 崩坏了。因为这是一个
非常小的网站，而这张图片又非
常显眼，所以我实在无法对这个
问题视而不见

解决方案

假设我们有一张非常长的宽幅照片（比如图 8-29），但我们只能提供一
个 150×150 的正方形区域来展示它。为了突破这种窘境，我们想到了动画的
方法：在默认情况下只显示这张照片的左边缘，当用户跟它交互（比如鼠标
悬停）的时候，让它滚动并显露出剩余的部分。我们只需要用到一个元素就
可以显示这张图片了，稍后再给它的背景定位属性加上动画：

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

218 第 8 章 过渡与动画

඀ࠡ JOEC