TA貢獻1829條經驗 獲得超9個贊
我已經創建了一個示例，但您需要一點 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>
舉報