我要投稿

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

bendan520 css3

2023-08-26 0 6,449 百度已收录

进不了网站？换个网络试试！

当我们浏览网页的时候，我们会发现如今的网页变得越来越漂亮，很多动画特效也越来越让人眼花缭乱。这与HTML5和CSS3的深入发展密不可分。今天我们要分享一个基于HTML5和CSS3的文字效果——粒子效果文字动画效果。本文的内容是关于如何使用HTML5+css3实现粒子治疗文字和动画的特效。有一定的参考价值。有需要的同学可以参考一下。希望对您有所帮助。

粒子治疗文字动画特效原理

当我们拿到一段文字后，我们可以把它放在PS上放大观察。文本由不同颜色的小像素绘制。那么粒子治疗文字动画特效需要做的就是增加像素数量，让像素点击成一个正方形css3 粒子效果，然后将文字内容堆积起来。一般来说，将输入信息转换成图片后，读取图片的像素信息，同时简单地将图片划分为块，遍历每个区域的像素，判断块是否需要绘制粒子。

粒子治疗文字动画特效实现步骤

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

第1步：将文本转换为图片并将其插入到画布中

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() 
}

登录复制

第 2 步：减少像素数

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

var imageData = ctx.getImageData(0, 0, this.width, this.height)
var dataLength = imageData.data.length
var diff = 4 
var newCanvas = document.getElementById('canvas')
var newCtx = newCanvas.getContext('2d')
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: '#fff'
            }
            var newBubble = new Bubble(option)
            newBubble.draw(newCtx)
        } 
    }
}

登录复制