Javascript 在鼠标上方创建圆形火焰效果

我在网站上无意中发现了一个很不错的火焰效果。这个效果我只在游戏中看到过

有两个块的

左侧

和

右侧

（

邪恶

和

良好

）

当你悬停在这一个街区时，有一个圆形的火圈

就像在底部一样

来自

至

我创造了这样的东西，但实际上我的火并没有像上面的网站那样顺利地显示出来。我需要与网站中完全相同的效果，请帮助

。很好{
高度：200px；
宽度：200px；
背景图片：url(https://image.ibb.co/gapib8/good_icon.png);
背景尺寸：封面；
框大小：边框框；
填充：10px；
}
.好，电话铃响了{
溢出：隐藏；
过渡：1s不透明度；
转换定时功能：easeInOut；
不透明度：0；
身高：100%；
宽度：100%；
背景图片：url(https://image.ibb.co/eJCQpT/fire_ring.png);
背景重复：无重复；
背景尺寸：封面；
}
.好：悬停。响{
不透明度：1；
}

这是我的解决方案 它和网站不一样

您可以自由修改动画计时的值

我将旋转动画添加到火中

。很好{
高度：200px；
宽度：200px；
背景图片：url(https://image.ibb.co/gapib8/good_icon.png);
背景尺寸：封面；
框大小：边框框；
填充：10px；
}
.好，电话铃响了{
溢出：隐藏；
过渡：1s不透明度；
转换定时功能：easeInOut；
不透明度：0；
身高：100%；
宽度：100%；
背景图片：url(https://image.ibb.co/eJCQpT/fire_ring.png);
背景重复：无重复；
背景尺寸：封面；
}
.好：悬停。响{
不透明度：1；
动画：旋转2800毫秒线性0毫秒无限；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
/*不透明度：0*/
}
50% {
变换：旋转（360度）；
/*不透明度：0*/
}
100% {
变换：旋转（720度）；
/*不透明度：0*/
}
}

---

这是我的解决方案。它应该在网站上复制动画

编辑：通过剪辑更新以提供循环显示效果，该效果也适用于Firefox:） 它没有使用与原始网站相同的资产，因此效果不太好。通过替换资产，您应该能够获得相同的效果，包括显示效果末尾的火花

。很好{
高度：150像素；
宽度：150px；
背景图片：url(https://image.ibb.co/gapib8/good_icon.png);
背景尺寸：封面；
职位：
}
.好，电话铃响了{
位置：相对位置；
溢出：隐藏；
身高：100%；
宽度：100%；
}
.好，给img打电话{
位置：绝对位置；
顶部：-1px；
不透明度：0；
身高：100%；
宽度：100%；
过渡：不透明度0.2s；
}
.好，响了，开火了{
位置：绝对位置；
最高：4.2%；
左：3.6%；
宽度：90%；
身高：90%；
背景图片：url(https://preview.ibb.co/cNZZG8/fire_ring_complete.png);
背景尺寸：588px自动；
背景重复：无重复；
背景位置：-150px-300px；
不透明度：0；
过渡：0.2s不透明度；
}
.好：悬停。响。开火{
不透明度：1；
过渡：不透明度0.1s；
变换：旋转（5度）；
动画：显示0.4s立方贝塞尔（0,0,1,1）；
}
@关键帧显示{
0% {
剪辑路径：多边形（100%100%、51%63%、100%30%、100%45%、100%57%、100%100%、100%57%、51%63%）；
}
12.5% {
剪辑路径：多边形（100%100%、51%63%、100%30%、100%45%、100%57%、100%100%、100%100%、51%63%）；
}
25% {
剪辑路径：多边形（49%37%、49%30%、100%30%、100%45%、100%57%、100%100%、51%100%、51%50%）；
}
37.5% {
剪辑路径：多边形（50%63%、51%63%、100%30%、100%45%、100%57%、100%100%、01100%、51%63%）；
}
50% {
剪辑路径：多边形（050%、50%54%、100%30%、100%45%、100%57%、100%100%、01100%、050%）；
}
62.5% {
剪辑路径：多边形（0,52%53%，100%30%，100%45%，100%57%，100%100%，0,100%，0,42%）；
}
75% {
剪辑路径：多边形（48%0、49%50%、100%30%、100%45%、100%57%、100%100%、01100%、0）；
}
87.5% {
剪辑路径：多边形（100%0、46%30%、100%30%、100%45%、100%57%、100%100%、01100%、0）；
}
100% {
剪辑路径：多边形（100%0、100%0、100%30%、100%45%、100%57%、100%100%、01100%、0）；
}
}
.好：悬停。按一下img{
不透明度：1；
过渡：不透明度0.3s；
过渡延迟：0.2s；
动画：旋转20秒线性都无限大；
}
@关键帧旋转{
从{
变换：旋转（0度）比例（0.9）；
}
到{
变换：旋转（360度）比例（0.9）；
}
}

---

这里是使用片段着色器的重量级WebGL解决方案

高精度浮点；
均匀浮动时间；
均匀vec2分辨率；
均匀浮动填充；//消防环的填充（0-1）
vec3壁炉（浮子一）{
浮子T=1400.+1300.*i；
vec3 L=vec3（7.4,5.6,4.4）；
L=pow（L，vec3（5.0））*（exp（1.43876719683e5/（T*L））-1.0）；
返回1.0-exp（-5e8/L）；
}    
vec3 hash33（vec3 p）{
float n=sin（点（p，vec3（7157113））；
返回分数（vec3（209715226214432768）*n）；
}
浮动voronoi（vec3 p）{
// https://www.iquilezles.org/www/articles/voronoilines/voronoilines.htm
vec3 b，r，g=地板（p）；
p=分形（p）；
浮点数d=1。；
对于（int j=-1；j@BramVanroy），它缺少“旋转”原始版本中的效果。您需要查看剪辑路径，并对其设置动画。可能是一个从0度到360度的三角形或其他形状。根据OPs描述和示例，需要一个无限动画循环。@Script47是的exactly@GautamNaik网站上的动画有点像是填满了，但你只是凭空而来需要完全像在站点中一样填充。填充完成后，它开始循环。你是100%正确的。我最初在Firefox中查看该站点，它的行为与Chrome中的行为不同。将有另一个循环显示效果的更新。