在背景图像的粒子

Question

如https://discordapp.com/所示，浮动的粒子覆盖了标题的背景。我几乎到处搜索，试图导出透明视频，来自Premiere CC的GIF，After Effects甚至Photoshop，但它们都不会像在此页面上看到的那样工作。 我也无法通读代码来找到效果的来源。

Answer 1

使用浏览器开发工具检查这些（点击 F12 ...）显示这些是一堆<div>元素，背景图像设置，使用CSS动画垂直移动它们，无限重复。

这些样式是内联的，为了便于阅读，我在下面打破了一个。

<div
  style='background: url("/assets/6f2ed9d6f802aae1c46620dea14797d2.png");
    left: 0.63%;
    top: 45.41%;
    width: 67px;
    height: 56px;
    display: block;
    position: absolute;
    z-index: 2;
    opacity: 0;
    animation-name: Animation5;
    animation-duration: 5.98273s;
    animation-timing-function: linear;
    animation-delay: 0.382398s;
    animation-iteration-count: infinite;'
  data-reactid=".0.2.$=10:0.$=10:0.$=12:0.$=1$point-DISCORD-23:$point-DISCORD-23">
</div>

此风格使用的图像是：