编程 HTML / CSS

使用JS+CSS3技术：让你的名字动起来

Posted in HTML / CSS onApril 27, 2013

使用技术：JS+CSS3

浏览器支持：IE9，FireFox，Chrome

效果图：

源码分享：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD>
 <BODY> <canvas id="c" width="1024" height="768"></canvas> </BODY> <script> var inputName="JB51";//输入你的名字 var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; c.width = 1024; c.height = 768;
 a.font = "bold 200pt Arial"; a.fillStyle = "rgb(255,255,255)"; a.fillText(inputName, 50, 300); var px = [];
 var imgData=a.getImageData(0,0,c.width,c.height); for(x=0; x<imgData.width; x++) { for(y=0 ; y<imgData.height; y++) { if(getPixel(imgData,x,y)[3] > 0) { px.push( [x,y] ); } } }
 setInterval(draw, 10); var max = 40; var tt = new Array(); function tendril() { this.init = function(x, y, width) { this.x = x; this.y = y; this.width = width; this.angle = Math.random()*2*Math.PI - Math.PI; this.v = 0; this.length = 0; }; this.grow = function(distance, curl, step) //distance=3.0, curl=1.0, step=0.02 { if(this.length < max) { this.x += Math.cos(this.angle) * distance; this.y += Math.sin(this.angle) * distance; this.v += Math.random() * step - step/2; this.v *= 0.9 + curl*0.1; this.angle += this.v; if(this._x != undefined) { aa = this.length/max; r = 8; g = parseInt(aa * 255); b = 32; a.beginPath(); a.strokeStyle="rgba("+r+","+g+","+b+","+(1-aa)+")"; a.moveTo(this._x,this._y); a.lineTo(this.x,this.y); a.closePath(); a.stroke(); } this._x = this.x; this._y = this.y; this.length++;
 } }; }; function draw() { // add new tendrils for(p in px) { if(Math.random() > 0.9999) { var t = new tendril(); t.init(px[p][0],px[p][1],15); tt.push ( t ); } }
 // grow actuals tendrils if(tt.length > 0) { for(t in tt) { tt[t].grow(1.0, 1.0, 0.02); } }
 } 
 function getPixel(imgData, x, y) { var offset = (x + y * imgData.width) * 4; var r = imgData.data[offset+0]; var g = imgData.data[offset+1]; var b = imgData.data[offset+2]; var a = imgData.data[offset+3]; return [r,g,b,a]; } </script></HTML>

提示：您可以先修改部分代码再运行

使用JS+CSS3技术：让你的名字动起来

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

CSS3 简单又实用的5个属性

Mar 04 HTML / CSS

一款恶搞头像特效的制作过程利用css3和jquery

Nov 21 HTML / CSS

详解CSS3阴影 box-shadow的使用和技巧总结

Dec 03 HTML / CSS

CSS3 实现童年的纸飞机

May 05 HTML / CSS

把富文本的回车转为br标签

Aug 09 HTML / CSS

HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)

Jul 15 HTML / CSS

html5基础标签(html5视频标签 html5新标签用法)

Dec 30 HTML / CSS

HTML5进度条特效

Dec 18 HTML / CSS

浅谈html5 响应式布局

Dec 24 HTML / CSS

详解HTML5中download属性的应用

Aug 06 HTML / CSS

吃透移动端 1px的具体用法

Dec 16 HTML / CSS

wordpress添加Html5的表单验证required方法小结

Aug 18 HTML / CSS

CSS3 绘制BMW logo实的现代码

Apr 25 #HTML / CSS

纯HTML+CSS3制作导航菜单(附源码)

Apr 24 #HTML / CSS

Css3+Js制作漂亮时钟(附源码)

Apr 24 #HTML / CSS

CSS3盒子模型详解

Apr 24 #HTML / CSS

CSS3盒子模型详解

Apr 24 #HTML / CSS

css3闪亮进度条效果实现思路及代码

Apr 17 #HTML / CSS

关于CSS Tooltips(鼠标经过时显示)的效果

Apr 10 #HTML / CSS

You might like

php addslashes和mysql_real_escape_string

2010/01/24 PHP

php5.3中连接sqlserver2000的两种方法(com与ODBC)

2012/12/29 PHP

php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法

2014/11/04 PHP

老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略

2016/03/20 PHP

PHP给源代码加密的几种方法汇总(推荐)

2018/02/06 PHP

PHP 图片合成、仿微信群头像的方法示例

2019/10/25 PHP

一段多浏览器的"复制到剪贴板"javascript代码

2007/03/27 Javascript

原生JS实现拖拽图片效果

2020/08/27 Javascript

jQuery对象的链式操作用法分析

2016/05/10 Javascript

nodejs根据ip数组在百度地图中进行定位

2017/03/06 NodeJs

jQuery简易时光轴实现方法示例

2017/03/13 Javascript

Angular2使用Angular CLI快速搭建工程（一）

2017/05/21 Javascript

详解Vue2.0组件的继承与扩展

2018/11/23 Javascript

vue中使用vee-validator完成表单校验方案

2019/11/01 Javascript

python获取标准北京时间的方法

2015/03/24 Python

python使用tcp实现局域网内文件传输

2020/03/20 Python

python pytest进阶之xunit fixture详解

2019/06/27 Python

Python 70行代码实现简单算式计算器解析

2019/08/30 Python

详解基于python的多张不同宽高图片拼接成大图

2019/09/26 Python

python基于K-means聚类算法的图像分割

2019/10/30 Python

python飞机大战pygame游戏框架搭建操作详解

2019/12/17 Python

使用pandas库对csv文件进行筛选保存

2020/05/25 Python

Keras SGD 随机梯度下降优化器参数设置方式

2020/06/19 Python

塑料制成的可水洗的编织平底鞋和鞋子：Rothy’s

2018/09/16 全球购物

意大利拉斐尔时尚购物网：Raffaello Network（支持中文）

2018/11/09 全球购物

马来西亚排名第一的宠物用品店：Pets Wonderland

2020/04/16 全球购物

如何利用cmp命令比较文件

2016/04/11 面试题

开办大学饮食联盟创业计划书

2014/01/29 职场文书

预备党员政审材料

2014/02/04 职场文书

企业安全生产责任书范本

2014/07/28 职场文书

市场部经理岗位职责

2015/02/02 职场文书

公司优秀员工推荐信

2015/03/24 职场文书

css 边框添加四个角的实现代码

2021/10/16 HTML / CSS

详细聊聊关于Mysql联合查询的那些事儿

2021/10/24 MySQL

SpringBoot整合minio快速入门教程(代码示例)

2022/04/03 Java/Android

MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法

2022/06/14 MySQL