Question

提前感谢您的帮助。

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

第3部分（黑色bg）有单词＆＃34;任何＆＃34;带下划线，当你滚动它时，它会引发一个序列，其中该单词会变为各种其他单词。

我试图找到一个相关的教程，但没有运气。想知道是否有人能够指出实现这种效果的方式，无论是通过单独的css3还是通过jquery。理想情况下，动画在到达＆＃34;单词选项＆＃34;。

的末尾后会停止

全部谢谢！

Answer 1

这是用纯CSS做到这一点的一种方法：＆＃34; animate＆＃34;伪元素的内容

＆＃13;

.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' }
}

＆＃13;

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

＆＃13;

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
  }
}

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

CSS动画在悬停时开始，然后停止

2 个答案: