如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）

function loadCanvas(value) {    var fontSize = 100,        width = calWordWidth(value, fontSize),         canvas = document.createElement('canvas')    canvas.id = 'b_canvas'    canvas.width = width     canvas.height = fontSize    var ctx = canvas.getContext('2d')    ctx.font = fontSize + "px Microsoft YaHei"    ctx.fillStyle = "orange"    ctx.fillText(value, 0, fontSize / 5 * 4)    getImage(canvas, ctx)}function getImage(canvas, ctx) {    var image = new Image()    image.src = canvas.toDataURL("image/jpeg")    image.onload = function() }

var imageData = ctx.getImageData(0, 0, this.width, this.height)var dataLength = imageData.data.lengthvar diff = 4 var newCanvas = document.getElementById(&#39;canvas&#39;)var newCtx = newCanvas.getContext(&#39;2d&#39;)for (var j = 0; j < this.height; j += diff) {    for (var i = 0; i < this.width; i += diff) {        var colorNum = 0        for (var k = 0; k < diff * diff; k++) {            var row = k % diff            var col = ~~(k / diff)            let r = imageData.data[((j + col) * this.width + i + row) * 4 + 0]            let g = imageData.data[((j + col) * this.width + i + row) * 4 + 1]            let b = imageData.data[((j + col) * this.width + i + row) * 4 + 2]            if (r < 10 && g < 10 && b < 10) colorNum++         }        if (colorNum < diff * diff / 3 * 2) {            var option = {                x: i,                y: j,                radius: 6,                color: &#39;#fff&#39;            }            var newBubble = new Bubble(option)            newBubble.draw(newCtx)        }     }}