在悬停时创建橡胶动画

Question

我正在制作我的网站，希望当您将鼠标悬停在我的标题中的每个字母时都有橡胶效果。一个明显的例子可以在https://jacekjeznach.com/home部分看到。我考虑过让每个字母成为一个带有类的跨度，通过悬停来改变它的大小和颜色。但我不知道如何创建“橡胶”效果，或者如何创建动画。任何想法？我会很感激。

Answer 1

我已经创建了一个示例，但您需要一点 JavaScript 才能正常工作。此代码使用默认情况下已包含在 WordPress 中的 jQuery。

如果您不想使用 javaScript，我已经包含了 CSS :hover，您可以取消注释并删除 javaScript，但要知道一旦用户不再将鼠标悬停在元素上，动画就会停止。

$(".rubberBand").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){

  $(this).removeClass("animated")  

})

$(".rubberBand").hover(function(){

  $(this).addClass("animated");        

})

span.rubberBand {

  display: inline-block;

  animation-duration: 1s;

  animation-fill-mode: both;

  animation-iteration-count: 1;

  font-size: 60px;

  font-weight: bold;

}

span.rubberBand.animated {

  -webkit-animation-name: rubberBand;

  animation-name: rubberBand;

}

/*

WITHOUT JAVASCRIPT, UNCOMMENT THESE LINES AND YOU'LL SEE THAT THE ANIMATION STOPS WHEN YOU HOVER OUT

*/

/*

span.rubberBand:hover {

  -webkit-animation-name: rubberBand;

  animation-name: rubberBand;

}

*/

@keyframes rubberBand {

  from {

    transform: scale3d(1, 1, 1);

  }

  30% {

    transform: scale3d(1.25, 0.75, 1);

  }

  40% {

    transform: scale3d(0.75, 1.25, 1);

  }

  50% {

    transform: scale3d(1.15, 0.85, 1);

  }

  65% {

    transform: scale3d(0.95, 1.05, 1);

  }

  75% {

    transform: scale3d(1.05, 0.95, 1);

  }

  to {

    transform: scale3d(1, 1, 1);

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="rubberBand">H</span>

<span class="rubberBand">E</span>

<span class="rubberBand">L</span>

<span class="rubberBand">L</span>

<span class="rubberBand">O</span>