前言
自从掘金的月度征文活动不搞之后，我已经好久没有在掘金上面写文章了。再不写点东西，感觉自己的笔都快生锈了。而现在，刚好又到了新年创意大赛的时候了。
在去年，我参加了兔年的创意大赛。今年龙年了，我打算参加一下龙年的新年创意大赛了。同时，也再练习下自己的文笔。
创意
在兔年的创意大赛里，我用css相关内容，做了一些兔子的动画。
现在再看当时做的一些动画效果，感觉还是挺可爱的。
今年到了龙年了，我在想，要做一些什么创意效果呢？
我想了又想，想了又想，既然是龙年了，那就做一条龙吧。同时，以前有一部美剧，我挺喜欢看的： 《冰与火之歌》 。
这部美剧，里面有一些场景是什么呢：是一条龙，喷出火焰。
好的，灵感这就来了，就做一条会喷火的龙吧。
既然已经想好了要制作什么内容了，那就开始制作吧。
寻找素材
要开始制作动画，那当然要先找素材了。在开始制作前，我们要找一些龙的素材，和火的素材等。
有了这些素材，我们才可以开始制作动画。
找素材的过程，就不详细说了，通过百度即可找到。
制作
素材已经找好了，接下来，我们就可以开始进行制作了。
这里，我打算使用原生js来实现的。所以我们先创建一个index.html文件，我们将会在这个文件里完成我们的代码。
我们先在body里面，添加一个img标签，把我们的龙素材引入进来。
我们看到，龙图片素材，已经被我们引入进来了。
接下来，我们要开始制作火焰了。制作火焰，要怎么制作呢？
我想的是，不要一开始，就在龙嘴那里制作火焰。先是在其它地方，把火焰制作好之后，我们再把火焰移动到龙嘴那里。这样更容易制作，不会让龙嘴的位置，干扰到火焰的制作。
我们在下面，再新增一个img标签，把火焰素材引入进来。
火焰的素材引入进来了，但是图片太大了。没有关系，我们可以通过css来进行调整。
通过css的调整，火焰就变小了。
火焰素材引入进来了，要怎么做喷火效果？
这是我的思路：
我想的是，在一个点（起始点）创建多个火焰，然后让火焰掉落下来。掉落的时候，可以让火焰有一个随机的左右掉落。这样多个火焰的积累掉落，就会形成一个火柱的效果了。
有了思路，就可以开始制作了。
因为火柱制作好之后，我们还要把火柱移动到龙嘴那里。所以，在火焰素材外层，我们需要添加一个容器，把这些火焰都包裹起来。
<div class="fire-wrapper"></div>
这里，我是使用一个div来做为容器，把火焰包裹起来。
创作火焰素材，我会通过动态创建img标签的方式，添加到火焰容器里面，从而实现动态地创建火焰素材。
创建火焰素材的img标签，我把它封装成了一个函数
function generateFire() {
let imgDom = document.createElement('img')
imgDom.src = './images/huo1.png'
let x = getRandom(50) * getPositiveAndNegative()
let y = 180
let scale = getRandom(1.6)
imgDom.style.setProperty('--custom-x', `${x}px`)
imgDom.style.setProperty('--custom-y', `${y}px`)
imgDom.style.setProperty('--custom-scale', scale < 1 ? scale + 1 : scale)
imgDom.classList.add('fire')
fireWrapper.appendChild(imgDom)
setTimeout(() => {
imgDom.classList.add('fire-big')
}, 200);
setTimeout(() => {
fireWrapper.removeChild(imgDom)
}, 1500);
}
主要是使用document.createElement来创建一个img标签，然后再给这个img标签，添加一些属性和类名。最后把这个img标签，添加到火焰素材容器里即可。
这个创建火焰的函数，都是一些基本的javascript代码，大家一看就懂了。
创建火焰的函数封装好了，要不停地创建火焰，这时候就需要使用到setInterval方法了。
setInterval(() => {
generateFire()
}, 80);
setInterval方法的配置，我这里设置的是80ms。即每隔80ms就调用一次generateFire方法，创建火焰素材。
这样火柱就创建好了，接着，我们要火焰的容器，移动到龙嘴那里。这样看起来，火焰就是从龙的嘴里面，喷射出来的。
移动火焰容器，你可以使用绝对定位或者transform都可以，我这里使用的是绝对定位，把容器移动到龙嘴里面。
前面介绍了这么多，我们看下最后出来的效果是怎么样的：
我们可以看到，喷火龙的效果，就制作好了。整个效果，看起来还可以吧。
小结
本篇文章，主要是介绍了喷火龙的制作方法。整个制作过程，使用原生js和html来制作的。没有涉及到特别复杂的方法，只要你把整个制作的思路给捋清楚了，制作起来，就没有啥问题了。
如果你也想制作一条会喷火的龙，可以参考一下上面我写的思路，自己来实现一下吧！
最后，新年了，祝大家：就像这条喷火的龙一样，红红火火！
原文链接：https://juejin.cn/post/7337148150619570226 作者：Alin
