悬停时在多个图像之间交叉答案

【问题标题】：Cross between multiple images on hover悬停时在多个图像之间交叉
【发布时间】：2020-11-11 04:33:48
【问题描述】：

下面链接中的第一个示例，但带有悬停。它只用两张图片解释。但我想要多张图片... http://css3.bradshawenterprises.com/cfimg/ 然后我希望它在鼠标移出时向后播放。

我尝试通过将第二张图片替换为 gif 来解决此问题，但出现了问题。因为 gif 只播放一次或无限次。如果你想再玩一次，你应该重新加载它，这是低效的。我认为不可能重放 gif 或使用 HTML/CSS 或 javascript 向后播放。是吗？

【问题讨论】：

【解决方案1】：

我们将研究一些使我们能够使用 HTML5 视频替代动画 GIF 的技术。我们将学习如何将动画 GIF 转换为视频文件，并研究如何将这些视频文件正确嵌入到网络上，以便它们像 GIF 一样运行。

首先将 gif 转换为 mp4

ffmpeg -i animated.gif video.mp4

也适用于 webm

ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm

用视频替换 GIF 动画

<video autoplay loop muted playsinline>
   <source src="video.webm" type="video/webm">
   <source src="video.mp4" type="video/mp4">
</video>

现在视频充当 GIF

【讨论】：