如何在smartprogress中创建动画背景.使用js,css,html5

how to create animated background like in smartprogress.do using js,css,html5

本文关键字：js 使用 css html5 背景 动画 smartprogress 创建      更新时间：2023-09-26

我需要开发的网站有相同的背景动画作为酷的网站，所以我需要一些建议，我需要使用哪些工具来创建类似的东西，或者有任何像这个动画的开源插件?

UPD:谢谢他们回答我。我问的是那些在场地背景中混乱移动的小颗粒。对于那些感兴趣的人来说，它是particles.js，这个js库绘制了这样的动画。

我也看了源代码，我认为他们使用画布绘制背景动画，然后我认为他们有一个覆盖。

编辑:确认，他们用画布来给视差效果。

查看smartprogress.do/js/graphBg.js

他们用这个来画:

  <canvas class="graph-bg__graph" width="1366" height="50" style="z-index: 1; -webkit-transform: translate3d(0px, 0px, 0px);"></canvas>

也看一下JSON。我想这是他们对顶点数据使用的:https://smartprogress.do/graph-data/edges.json和改变边。Json到points.json。我不能发布超过2个链接

有几种方法可以做到:

  • GIF或其他动态图像作为背景(必须是高分辨率的，所以更大的加载时间;选项很少)
  • 背景视频(另一个大文件;更多的选择;不像bg)
  • 框架滚动背景与CSS过渡(非常大的文件，旧的浏览器提供静止图像)
  • 类似的JavaScript实现(更容易实现，但问题相似)

我已经看过你的例子网站的源代码，不能确定他们在使用什么。它可能是一个CSS转换。但这些想法应该可以让你开始。

相关文章：