激活 CSS 对页面加载的影响

Question

所以这是我尝试使用的代码：

<div style="text-align: center;"><i class="fas fa-phone fa-5x"></i></div>

<script>
  $(window).load(function(){
    $('.fa-phone').addClass('hvr-buzz');
});
</script>

我猜这个问题是因为默认情况下这个效果是在悬停时触发的，因为我使用的是 Hover.CSS ( https://ianlunn.github.io/Hover/ )。

我的目标是在页面加载时无限地运行制作这种效果，而无需用户将鼠标悬停在它上面。

有什么建议吗？？

Answer 1

在 CSS 中添加以下样式，无需 :hover 到您的元素，不需要 JS。

.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
    -webkit-animation-name: hvr-buzz;
    animation-name: hvr-buzz;
    -webkit-animation-duration: 0.15s;
    animation-duration: 0.15s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.hvr-buzz {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

演示 - https://codepen.io/bkdigital/pen/xxxEbZz

激活 CSS 对页面加载的影响

Activate CSS effect on page load

css

hover