CSS背景动画

Question

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

我尝试过使用image：

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

但是来自视频的动画要复杂得多。

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

Answer 1

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

• 有一个GIF file并设置背景(最简单)
• 获得一个带有3个山丘的PNG/SVG，添加基于CSS animation & CSS transition的动画背景(Works)
• 只需添加一个基于<代码>D9标签的视频。很多网站都是这么做的。(但是，根据你分享的视频，这是一个画布作为背景&写循环转换(复杂)

的JavaScript