CSS关键帧动画超链接

Question

我正在使用一个带有 CSS 关键帧动画的文本 slider 。已将 anchor 标记添加到文本标题以制作超链接。超链接未按预期运行。这个想法是每个旋转的文本标题都链接到网页下方的不同位置。

熟悉 css 关键帧动画的人能否检查下面的引用链接并推荐一个解决方案。

Reference text slider html

Reference text slider css

Answer 1

当使用绝对位置时，您必须注意 z-index，因为所有子元素都放置在同一位置。所以你可以通过这样做在你的动画中修复它:

@keyframes leftToRight {
0% {
    opacity: 0;
    z-index: -1;
}

5% {
    opacity: 0;
    z-index: -1;
    -webkit-transform: translateX(-50px);
}

10% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    z-index: 1;
}

25% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    z-index: 1;
}

30% {
    opacity: 0;
    z-index: -1;
    -webkit-transform: translateX(50px);
}

80% {
    opacity: 0;
    z-index: -1;
}

100% {
    opacity: 0;
    z-index: -1;
}
}

啊，你的 hrefs 中有一些拼写错误 :-)