ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发。今天我们要来分享一款基于HTML5和css3的文字特效——粒子效果文字动画特效。本篇文章给大家带来的内容是关于如何使用HTML5+css3实现粒子效果文字动画特效,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
粒子效果文字动画特效的原理
当我们拿到一段文字,可以放到ps里面放大观察,文字是由一个个很小的颜色不同的像素点绘制出来的,那么粒子效果文字动画特效需要做的就是通过降低像素数使像素点变成圆形,再拼凑出文字内容。总的来说就是通过将输入的信息转化为图片后,读取图片的像素信息,同时粗略的将图片分块,遍历每块区域中的像素点判断该块是否需要画一个粒子。
实现粒子效果文字动画特效的步骤
步骤一:文字转化为图片插入canvasfunction 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、html5、javascript特效代码,尽在:js特效大全
【相关推荐】
ae制h5文字动画_如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)相关推荐
- 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- html怎么把字做成动画效果,如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码)...
摘要 腾兴网为您分享:如何使用HTML5 css3实现粒子效果文字动画特效(附完整代码),学宝,小米社区,手机管家,神州专车等软件知识,以及小学英语点读机,便利宝,startos,工资宝,玩,大将军手 ...
- css3边框交替动画_利用 SVG 和 CSS3 实现有趣的边框动画
Carl Philipe Brenner的网站上有一些非常有创意和微妙的动画效果,今天我想和大家一起探计一下如何在SVG线条上使用CSS的transition来实现一些有意思的边框动画效果. 今天我们 ...
- c++ 三次多项式拟合_线性回归进阶版,多项式线性回归讲解与实现(附完整代码)...
每天给小编五分钟,小编用自己的代码,带你轻松学习深度学习!本文将会带你做完一个深度学习进阶版的线性回归---多项式线性回归,带你进一步掌握线性回归这一深度学习经典模型,然后在此基础上,小编将在下篇文章 ...
- ae制h5文字动画_对于8个华丽的HTML5文字动画特效图文赏析
文字是网页的灵魂,很早以前有人发明了很多漂亮的计算机字体,这让网页变得样式各异.HTML5和CSS3的出现,我们可以让文字变得更加富有个性,在一些需要的场合,我们甚至可以利用HTML5制作文字动画.本 ...
- ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
- 融入动画技术的粒子效果文字动画交互应用
写在前面 本次实现的交互系统是基于粒子系统的粒子文本效果.本次课程设计主要参考代码本色一书中的内容,系统应用中运用了 <代码本色> 第一章 向量.第二章 力.第四章 粒子系统等章节的动画技 ...
- h5酷炫粒子java代码_html5粒子效果文字特效
特效描述:html5 粒子效果 文字特效.html5粒子效果文字特效 代码结构 1. HTML代码 BLUR = false; PULSATION = true; PULSATION_PERIOD = ...
- php 3d animation,css3D+动画的例子(附完整代码)
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...
最新文章
- c语言信号机制以及中断
- 【转】维护工厂库存的一般设置
- java开发一个完整的秒杀与竞价网上商城
- PDA连接远程SQL 2005数据库
- python可以做科学计算吗_用 Python 做科学计算之最小二乘
- 一个资源管理系统的设计--基于cgroup机制
- 计算机网络 第七版 谢,计算机网络-谢仁-第7版-01章.pptx
- ActiveMQ 命令行启动 与 嵌入式启动、MessageListener 监听消息
- rh php70 php fpm,CentOS 7 配置php语言开发环境
- win10 pro 永久激活
- python雷达图的相似度_Python可视化:matplotlib 制作雷达图进行对比分析
- 实战Nagios NSCA方式监控Linux系统资源使用情况 -- Nagios配置篇 -- 被监控端
- Win10 如何设置自动锁定屏幕
- Android apps浅析01-Amazed:一个简单但令人上瘾的加速度为基础的大理石指导游戏。...
- 物联计算机大赛,【实践科】关于举办2020“天翼物联杯”中国高校计算机大赛-网络技术挑战赛校内选拔赛的通知...
- 89c52串口通信+LCD1602显示
- 如何下载Mac收费软件?
- 「微服务网关实战三」详细理解 SCG 路由、断言与过滤器
- 组态王能直接读取仪表数据吗_通过组态王把智能仪表里的数据传给PLC和触摸屏...
- Windows 10 应用未在所需的时间内启动
热门文章
- Linux ps、top、free、uname命令
- 应急响应与系统加固(护网蓝初面试干货)
- u-boot-2014.10移植第7天----深入分析代码(二)
- php 开源 多人博客系统,PHP多用户博客系统WordPress MU
- oppo android多大内存,oppo r11 plus内存多大
- Diversity Regularized Spatiotemporal Attention for Video-based Person Re-identification 翻译
- 会计学习笔记(非专业)
- Python高级编程技巧-线程与进程(进阶讲解)
- 感官营销-sensory marketing-论文解读
- 键盘区域中编辑键的作用