悬停时在多个图像之间交叉
Posted
技术标签:
【中文标题】悬停时在多个图像之间交叉【英文标题】: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
【讨论】:
感谢您的回答。但我正在考虑另一种解决方案,涉及从图像制作精灵表并使用 CSS 动画处理它。我认为使用精灵表文件的大小会更小。 转成视频后怎么办?你如何处理这个:悬停播放和反向悬停播放后的最后一帧暂停。以上是关于悬停时在多个图像之间交叉的主要内容,如果未能解决你的问题,请参考以下文章
jQuery:悬停链接时在div中动画(淡化)背景颜色或图像?