CSS背景动画

Question

我需要将此动画作为背景： https://www.dropbox.com/s/yu1kot89f05ybgn/Comp%201_10.mov?dl=0

我试图用图片做到这一点：

background-image url('../images/content/fracture.png')
animation background-moving linear 10s infinite;

但视频中的动画更复杂。

这里应该使用什么技术？ （CSS，SVG动画......）？ 或者请提供一些例子。

Answer 1

根据我的经验，我想给你一些选择。

• 拥有GIF file并设置背景（最简单）
• 获取PNG / SVG有3个山丘，根据CSS animation＆amp;添加动画背景动画。 CSS transition（有效）
• 只需根据HTML5 video标记添加视频即可。许多网站都这样做。 （但是，根据您分享的视频，这是不必要的。）
• 以画布为背景＆amp;写JavaScript循环过渡（复杂）