有没有办法让GIF在鼠标不在的时候播放悬停和暂停？ [英] Is there a way to make GIF play on hover and pause when mouse is out?

问题描述

我想知道是否有方法可以使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我能够找到并更改。

这篇关于有没有办法让GIF在鼠标不在的时候播放悬停和暂停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！