javascript - 这个网页的动图动画特效名称叫啥？

Question

各位大佬们帮帮忙，下面这个网页在奖品中间一闪一闪的粒子特效叫啥名，有具体源码地址更好，谢谢大家。

https://wall.myhudong.cn/screen#/draw_pool?acid=XOyLWMsRNLDls5V5kw&l=a

尝试搜索了很多网站，可能是关键词问题，希望大家帮帮忙

Answer 1

第一印象是canvas写的背景动画，然后一打开开发者工具，div+css动画，被现在的新技术迷了眼了

Answer 2

扣了下代码，这特效没啥技巧，纯纯的DIV拼的

codepen 似乎被墙了，再放一个 jsfiddle
https://jsfiddle.net/Fractal0001/b9rz2yxa/

代码居然太长，超出限制了，放 codepen 了
https://codepen.io/FractalPen/pen/xxebeXJ

Answer 3

这个是网站作者自己写的, 他的核心代码:

          s(                "div",                {                  staticClass: "star-container",                },                t._l(10, function (a) {                  return s(                    "div",                    {                      key: "ring" + a,                      staticClass: "star-ring",                      style: {                        animationDelay: (a - 1) / 10 + "s",                      },                    },                    t._l(starList[a - 1], function (i) {                      return s("div", {                        key: i,                        staticClass: "star",                        style: t.starStyle(i, a / 1 + 0, starList[a - 1]),                      });                    }),                    0                  );                }),                0              )

starStyle函数:

            starStyle(t, a, s) {              let i = 360 / s,                e = -1 * Math.sin((((t - 1) * i) / 180) * Math.PI) * a + "rem",                n = Math.cos((((t - 1) * i) / 180) * Math.PI) * a + "rem";              return {                transform: `translate(${e}, ${n}) rotate(${(t - 1) * i}deg)`,              };            },

starList数组值

              starList: [10, 20, 30, 40, 60, 90, 90, 90, 90, 90],

Answer 4

根据您提供的网页链接和描述，这个网页中的粒子特效通常被称为“粒子系统”或“粒子动画”。这种特效是通过在计算机图形中模拟大量小粒子的运动来创建的，可以产生非常逼真的自然效果，如火焰、烟雾、水流等。

至于具体的源码地址，由于版权和隐私等问题，我无法直接提供特定的源码地址。但是，您可以在互联网上搜索“粒子系统”或“粒子动画”的教程和示例代码，这些资源通常会提供详细的实现方法和代码示例，可以帮助您了解如何创建这种特效。

另外，您也可以尝试在相关的编程社区或论坛上发布问题，询问其他开发人员如何创建类似的粒子动画效果，并可能获得更有针对性的建议和帮助。