带有链接的 CSS KEYFRAMES答案

【问题标题】：CSS KEYFRAMES with links带有链接的 CSS KEYFRAMES
【发布时间】：2013-05-09 22:40:17
【问题描述】：

我有一些图像可以在关键帧中很好地滚动

@-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 */
}

【问题讨论】：

查看您的 HTML 也会很有用。
为什么不直接使用精灵然后改变背景位置？
如果你想添加链接，我建议使用带有绝对定位的内联图像而不是背景图像的适当幻灯片。 jQuery Cycle 是一个受欢迎的选择。
在主帖中做了一些编辑谢谢！
@Blazemonger 非常感谢我已经启动并运行了 cycle2 的建议，但是如果我以正常方式进行操作，我现在正在努力制作这些图像链接，它只是将图像从循环中取出并单独显示谢谢

标签： css animation css-animations

【解决方案1】：

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

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

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

【讨论】：

我认为这并不能回答他关于仅向一张图片添加可点击链接的问题。
是的，我对动画很满意，显然，如果我不能让它在我所做的事情中工作，我很高兴看到精灵，更重要的是它完美地工作我只是希望这些图像中的一个成为链接。谢谢