Html 在悬停状态下创建橡胶动画

我正在制作我的网站，希望我标题中的每一个字母在你悬停时都有一个橡皮效果。在主页部分可以看到一个明显的例子

我想让每个字母都有一个类，这个类通过悬停改变大小和颜色。但我不知道如何创建“橡胶”效果，或者如何创建动画

有什么想法吗？我将不胜感激

---

谢谢

我已经创建了一个示例，但是您需要有一点javascript才能很好地工作。此代码使用默认情况下已包含在Wordpress中的jQuery

如果您不想使用javaScript，我已经包含了

：hover

CSS，您可以取消对javaScript的注释并删除它，但是知道一旦用户不再悬停元素，动画就会停止

$（“.rubberBand”）.bind（“webkitAnimationEnd mozAnimationEnd animationend”，函数（）{
$（此）.removeClass（“动画”）
})
$（“.rubberBand”）.hover（函数（）{
$（this.addClass（“动画”）；
})

span.rubberBand{
显示：内联块；
动画持续时间：1s；
动画填充模式：两者都有；
动画迭代次数：1；
字体大小：60px；
字体大小：粗体；
}
span.rubberBand.animated{
-webkit动画名称：rubberBand；
动画名称：橡皮筋；
}
/*
如果没有JAVASCRIPT，取消注释这些行，您将看到当您悬停在外时动画停止
*/
/*
span.rubberBand:悬停{
-webkit动画名称：rubberBand；
动画名称：橡皮筋；
}
*/
@关键帧橡皮筋{
从{
变换：scale3d（1,1,1）；
}
30% {
变换：scale3d（1.25,0.75,1）；
}
40% {
变换：scale3d（0.75,1.25,1）；
}
50% {
变换：scale3d（1.15,0.85,1）；
}
65% {
变换：scale3d（0.95,1.05,1）；
}
75% {
转换：scale3d（1.05,0.95,1）；
}
到{
变换：scale3d（1,1,1）；
}
}

H
E
L
L
哦

太可怕了！谢谢你的出色工作。出于某种原因，如果我在Wordpress中复制它，动画会在页面加载时发生，但不会在我悬停字母时发生@FrancoDarget您的代码没有包装在

元素中。如果您查看页面底部页脚下方的代码，您将看到文本形式的代码。此外，如果您发现此代码有帮助，请将其向上投票或将其作为答案接受，以便其他人知道它是有用的。