CSS动画始于悬停，然后停止

Question

预先感谢您的任何帮助。

我一直在处理一些效果，以找到我喜欢的东西，并偶然发现了这个网站：https://www.marieforleo.com/

第三部分向下（黑色BG）带有"任何东西"下划线的一词，当您滚动它时，它会引发一个序列，其中该词会更改为各种其他单词。

我试图找到一个相关的教程，但没有运气。想知道是否有人可以单独或使用jQuery来指向实现这一效果的道路。理想情况下，动画在达到"单词选项"的末尾后将停止。

谢谢所有！

Answer 1

这是使用纯CSS进行操作的一种方法："动画"伪元素的内容

.words::before {
  content: "hello";
}
.words:hover::before {
  animation: rotateWords 5s;
}
@keyframes rotateWords {
  20% { content: 'world' }
  40% { content: 'foo' }
  60% { content: 'bar' }
  80% { content: 'lorem' }
  100% { content: 'ipsum' }
}

<span class="words"></span>

Answer 2

您可以使用JavaScript随机选择一个单词并将其注入悬停。如果那不是您想要的，则可以在Sass Mixin中使用for循环。像这样的事情应该起作用。

@mixin randomword
$words: word1, word2, word3; //array with desired words
@for $i from 1 through length($words) { //this loops through the array
  .words:hover {
    content: nth($words,random(length($words)); //random number generator
  }
}

这应该从$单词列表中选择一个单词，在1和单词列表的长度之间的随机位置。假设您的初始单词是从内容块中提取的，这将是一句话。