Question

我正在使用带有css关键帧动画的文本滑块。已将锚标记添加到文本标题以创建超链接。超链接的行为不符合预期。我们的想法是每个旋转的文本标题都链接到网页下方的不同位置。

熟悉css关键帧动画的人是否可以检查下面的参考链接并推荐一个解决方案。

Answer 1

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

const childrenMap = { 1: Child1Component1, 2: ... };

...

const filteredChildren = children.filter(child => {
  if (childrenMap[valuefromUser])
    return filteredChild instanceof childrenMap[valuefromUser]);
});

啊，你的hrefs中有一些拼写错误： - ）

Answer 2

不透明度不会执行display: none;技巧，因此即使是opacity: 0;，您仍然可以点击锚点。并且因为所有元素都是重叠的，所以每次单击时，您只能单击顶部的#intelligent（没有z-index配置，它是.slidingHorizontal中html中的最后一项）

添加.slidingHorizontal span { display: inline-block; }，以便您可以调整<span>。
在关键帧中添加opacity: 0;和width: 0;。（因为.slidingHorizontal span { overflow: hidden; }，所以无法在width:0容器内点击您的锚点;

/*Body*/


/*Horizontal Sliding*/
.slidingHorizontal{
  display: inline;
  text-indent: 8px;
}
.slidingHorizontal span{
  animation: leftToRight 12.5s linear infinite 0s;
  -ms-animation: leftToRight 12.5s linear infinite 0s;
  -webkit-animation: leftToRight 12.5s linear infinite 0s;
 /* color: #00abe9;*/
  opacity: 0;
  overflow: hidden;
  position: absolute;
  display: inline-block;
}

.slidingHorizontal span:nth-child(2){
  animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
  animation-delay: 5s;
  -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
  animation-delay: 7.5s;
  -ms-animation-delay: 7.5s;
  -webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
  animation-delay: 10s;
  -ms-animation-delay: 10s;
  -webkit-animation-delay: 10s;
}

/*leftToRight Animation*/
@-moz-keyframes leftToRight{
  0% { opacity: 0; width:0; }
  5% { opacity: 0; width:0; -moz-transform: translateX(-50px); }
  10% { opacity: 1; width:auto; -moz-transform: translateX(0px); }
  25% { opacity: 1; width: auto; -moz-transform: translateX(0px); }
  30% { opacity: 0; width: 0; -moz-transform: translateX(50px); }
  80% { opacity: 0; width: 0;}
  100% { opacity: 0; width: 0;}
}
@-webkit-keyframes leftToRight{
  0% { opacity: 0; width: 0;}
  5% { opacity: 0; width: 0; -webkit-transform: translateX(-50px); }
  10% { opacity: 1; width: auto; -webkit-transform: translateX(0px); }
  25% { opacity: 1; width: auto; -webkit-transform: translateX(0px); }
  30% { opacity: 0; width: 0; -webkit-transform: translateX(50px); }
  80% { opacity: 0; width: 0; }
  100% { opacity: 0; width: 0; }
}

<header>
  <h1>Rotating words using CSS Animations</h1>
</header>
<h2 class="sentence">check this out...
  <div class="slidingHorizontal">
    <span><a href="#cool">cool.</a></span>
    <span><a href="#elegant">elegant.</a></span>
    <span><a href="#beautirful">beautiful.</a></span>
    <span><a href="#differnt">different.</a></span>
    <span><a href="#intelligent">intelligent.</a></span>
  </div>
</h2>

<div id="cool">
  <h2>Cool</h2>
</div>
<div id="elegant">
  <h2>Elegant</h2>
</div>

<div id="beautiful">
  <h2>Beautiful</h2>
</div>

<div id="different">
  <h2>Differnt</h2>
</div>

<div id="intelligent">
  <h2>Intelligent</h2>
</div>

Answer 3

通过探索可见性选项取得进展。我能够以一种特殊的方式使链接工作。

1-在初始页面加载和第一个字旋转循环时，链接指向最后一个链接。

2-第一个周期完成后，链接指向正确的目的地。

我不明白为什么会这样，以及如何解决它。

text slider v2

text slider css v2

CSS关键帧动画超链接

3 个答案: