视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
2020-11-27 15:04:22 责编:小采
文档
 我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发。今天我们要来分享一款基于HTML5和css3的文字特效——粒子效果文字动画特效。本篇文章给大家带来的内容是关于如何使用HTML5+css3实现粒子效果文字动画特效,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

粒子效果文字动画特效的原理

当我们拿到一段文字,可以放到ps里面放大观察,文字是由一个个很小的颜色不同的像素点绘制出来的,那么粒子效果文字动画特效需要做的就是通过降低像素数使像素点变成圆形,再拼凑出文字内容。总的来说就是通过将输入的信息转化为图片后,读取图片的像素信息,同时粗略的将图片分块,遍历每块区域中的像素点判断该块是否需要画一个粒子。

实现粒子效果文字动画特效的步骤

步骤一:文字转化为图片插入canvas

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

效果如图所示

【相关推荐】

如何使用css3实现图片的自动轮播特效(附完整代码)

css3的颜色线性渐变属性:几种颜色之间的平稳过渡(附完整代码)

下载本文
显示全文
专题