TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊
我已經(jīng)創(chuàng)建了一個(gè)示例，但您需要一點(diǎn) JavaScript 才能正常工作。此代碼使用默認(rèn)情況下已包含在 WordPress 中的 jQuery。
如果您不想使用 javaScript，我已經(jīng)包含了 CSS :hover，您可以取消注釋并刪除 javaScript，但要知道一旦用戶(hù)不再將鼠標(biāo)懸停在元素上，動(dòng)畫(huà)就會(huì)停止。
$(".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>
舉報(bào)