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



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

我试着用gif替换第二张图片来解决这个问题,但出现了问题。因为gif只播放一次或无限次。如果你想再次玩,你应该再次加载它,这是低效的。我认为不可能用HTML/CSS或javascript回放gif或向后播放它。是吗?

我们将研究一些技术,这些技术使我们能够使用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

相关内容

  • 没有找到相关文章

最新更新