Question

我正在建立我的网站，希望标题中的每个字母在悬停时都具有橡胶效果。在https://jacekjeznach.com/主页部分中可以看到一个清晰的示例。

我考虑过将每个字母作为一个类的跨度，通过悬停更改其大小和颜色。但是我不知道如何创建“橡胶”效果，或者如何创建动画。

有什么主意吗？我会很感激。

谢谢！！！

Answer 1

我已经创建了一个示例，但您需要使用一些JavaScript才能使其正常运行。这段代码使用的是jQuery，默认情况下它已经包含在您的Wordpress中。

如果您不希望使用javaScript，我将提供:hover CSS，您可以取消注释并删除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>

在悬停时创建橡胶动画

1 个答案: