有没有办法让GIF在鼠标不在的时候播放悬停和暂停?

2022-07-20 00:00:00 gif hover html css playback

我想知道是否有方法可以使GIF具有这种行为:

  • 页面中的启动暂停;
  • 仅在悬停时播放;
  • 暂停在将鼠标拖出图像时的确切帧。

可以做到这一点吗?最好不要使用Java脚本,但如果需要,我可以使用它。


解决方案

有。基本上,您将需要创建自己的gif使用单独的框架。实质上,您创建X个帧,然后使用keyframes将它们作为绝对定位div的background-image属性循环。"gif"以属性animation-play-state:paused开头,悬停时更改为running。显然,可以切换这些属性。请考虑以下事项:

您的标记:

<div class="gif"></div>

和您的css:

.gif {
    position: absolute;
    margin: auto;
    background-image: url(/path/to/starting.frame);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    animation: play 0.5s infinite steps(1);
    animation-play-state: paused;
}
.gif:hover {
    animation-play-state:running;
}

@keyframes play {
    0%   { background-image: url('/path/to/0.frame'); } 
    15%  { background-image: url('/path/to/1.frame'); }
    30%  { background-image: url('/path/to/2.frame'); }
    45%  { background-image: url('/path/to/3.frame'); }
    60%  { background-image: url('/path/to/4.frame'); }
    75%  { background-image: url('/path/to/5.frame'); }
    90%  { background-image: url('/path/to/6.frame'); }
    100% { background-image: url('/path/to/7.frame'); }
}

Here is an example我能够找到并更改。

相关文章