0

我有一些图像在关键帧中滚动得很好

@-webkit-keyframes headImage /* Safari and Chrome */
{
0% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;}
10% {background:url(../images/homeBackground2.jpg) no-repeat left top #D8E3E9;}
30% {background:url(../images/homeBackground3.jpg) no-repeat left top #D8E3E9;}
50% {background:url(../images/homeBackground4.jpg) no-repeat left top #D8E3E9;}
70% {background:url(../images/homeBackground5.jpg) no-repeat left top #D8E3E9;}
90% {background:url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;}
}

但是，我想将其中一张图片设为可点击的链接，例如，我希望 homeBackground1.jpg 在可见时链接到 google.co.uk，但其他图片在显示时不会链接到任何地方。

有没有办法做到这一点？

谢谢

为了对此进行一些扩展，

将其插入 html 的代码只是一个

<section id="journey"> </section>

和 CSS

#journey {
    height:400px;
/*  border-bottom: 5px solid #E64097;
    border-top: 5px solid #E64097;*/
    background: url(../images/homeBackground1.jpg) no-repeat left top #D8E3E9;
    -moz-animation:headImage 60s infinite; /* Firefox */
    -webkit-animation:headImage 60s infinite; /* Safari and Chrome */
}
4

1 回答 1

0

您需要创建一个精灵。因此，您的所有图像都合并为一张大图像，但用户只能看到图像的一部分。

然后你只需改变background-position使用关键帧。这是一个很好的JSFIDDLE DEMO

如果您知道需要使用的关键帧的数量，您可以在 CSS 中使用from, to或作为时间尺度。%

于 2013-05-09T14:34:44.723 回答