我正在建立我的网站,希望标题中的每个字母在悬停时都具有橡胶效果。在https://jacekjeznach.com/主页部分中可以看到一个清晰的示例。
我考虑过将每个字母作为一个类的跨度,通过悬停更改其大小和颜色。但是我不知道如何创建“橡胶”效果,或者如何创建动画。
有什么主意吗?我会很感激。
谢谢!!!
答案 0 :(得分:0)
我已经创建了一个示例,但您需要使用一些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>