在悬停时创建橡胶动画

Question

我正在制作我的网站，希望当您将鼠标悬停在我的标题中的每个字母时都有橡胶效果。一个明显的例子可以在https://jacekjeznach.com/home部分看到。

我考虑过让每个字母成为一个带有类的跨度，通过悬停来改变它的大小和颜色。但我不知道如何创建“橡胶”效果，或者如何创建动画。

任何想法？我会很感激。

Answer 1

我已经创建了一个示例，但您需要一点 JavaScript 才能正常工作。此代码使用默认情况下已包含在 WordPress 中的 jQuery。如果您不想使用 javaScript，我已经包含了 CSS&nbsp;:hover，您可以取消注释并删除 javaScript，但要知道一旦用户不再将鼠标悬停在元素上，动画就会停止。$(".rubberBand").bind("webkitAnimationEnd mozAnimationEnd animationend", function(){&nbsp; $(this).removeClass("animated")&nbsp;&nbsp;})$(".rubberBand").hover(function(){&nbsp; $(this).addClass("animated");&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;})span.rubberBand {&nbsp; display: inline-block;&nbsp; animation-duration: 1s;&nbsp; animation-fill-mode: both;&nbsp; animation-iteration-count: 1;&nbsp; font-size: 60px;&nbsp; font-weight: bold;}span.rubberBand.animated {&nbsp; -webkit-animation-name: rubberBand;&nbsp; animation-name: rubberBand;}/*WITHOUT JAVASCRIPT, UNCOMMENT THESE LINES AND YOU'LL SEE THAT THE ANIMATION STOPS WHEN YOU HOVER OUT*//*span.rubberBand:hover {&nbsp; -webkit-animation-name: rubberBand;&nbsp; animation-name: rubberBand;}*/@keyframes rubberBand {&nbsp; from {&nbsp; &nbsp; transform: scale3d(1, 1, 1);&nbsp; }&nbsp; 30% {&nbsp; &nbsp; transform: scale3d(1.25, 0.75, 1);&nbsp; }&nbsp; 40% {&nbsp; &nbsp; transform: scale3d(0.75, 1.25, 1);&nbsp; }&nbsp; 50% {&nbsp; &nbsp; transform: scale3d(1.15, 0.85, 1);&nbsp; }&nbsp; 65% {&nbsp; &nbsp; transform: scale3d(0.95, 1.05, 1);&nbsp; }&nbsp; 75% {&nbsp; &nbsp; transform: scale3d(1.05, 0.95, 1);&nbsp; }&nbsp; to {&nbsp; &nbsp; transform: scale3d(1, 1, 1);&nbsp; }}<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>