编程 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的方法

Aug 29 HTML / CSS

用纯css3和html制作泡沫对话框实现代码

Mar 21 HTML / CSS

CSS3之多背景background使用示例

Oct 18 HTML / CSS

css3 线性渐变和径向渐变示例附图

Apr 08 HTML / CSS

css3旋转木马_动力节点Java学院整理

Jul 12 HTML / CSS

HTML5中的postMessage API基本使用教程

May 20 HTML / CSS

HTML5等待加载动画效果

Jul 27 HTML / CSS

html5 利用canvas手写签名并保存的实现方法

Jul 12 HTML / CSS

HTML5和CSS3实例教程总结(推荐)

Jul 18 HTML / CSS

详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性

May 25 HTML / CSS

html+css实现文字折叠特效实例

Jun 02 HTML / CSS

td 内容自动换行 table表格td设置宽度后文字太多自动换行

Dec 24 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数据库操作Helper类完整实例

2016/05/11 PHP

DWR Ext 加载数据

2009/03/22 Javascript

js左侧多级菜单动态的解决方案

2010/02/01 Javascript

关于textarea提交的内容无法换行的解决办法

2013/04/09 Javascript

jquery使用append(content)方法注意事项分享

2014/01/06 Javascript

JS 获取浏览器和屏幕宽高等信息代码

2014/03/31 Javascript

超赞的动手创建JavaScript框架的详细教程

2015/06/30 Javascript

Javascript模仿淘宝信用评价实例(附源码)

2015/11/26 Javascript

AngularJS向后端ASP.NET API控制器上传文件

2016/02/03 Javascript

JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)

2016/05/20 Javascript

js中获取时间new Date()的全面介绍

2016/06/20 Javascript

javascript时间戳和日期字符串相互转换代码(超简单)

2016/06/22 Javascript

nodejs中向HTTP响应传送进程的输出

2017/03/19 NodeJs

js获取指定时间的前几秒

2017/04/05 Javascript

JavaScript设置名字输入不合法的实现方法

2017/05/23 Javascript

JavaScript递归函数定义与用法实例分析

2019/01/24 Javascript

JS实现可以用键盘方向键控制的动画

2020/12/11 Javascript

[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽

2014/07/15 DOTA

[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12

2020/12/16 DOTA

Python中list初始化方法示例

2016/09/18 Python

python 采用paramiko 远程执行命令及报错解决

2019/10/21 Python

python将四元数变换为旋转矩阵的实例

2019/12/04 Python

Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space

2020/02/23 Python

浅谈pytorch中的BN层的注意事项

2020/06/23 Python

Python设计密码强度校验程序

2020/07/30 Python

HTML5梦幻之旅——炫丽的流星雨效果实现过程

2013/08/06 HTML / CSS

碧欧泉法国官网：Biotherm法国

2019/10/23 全球购物

灵泰克Java笔试题

2016/01/09 面试题

三查三看党性分析材料

2014/02/18 职场文书

应届毕业生求职信范文

2014/07/07 职场文书

民主生活会对照检查材料范文

2014/10/01 职场文书

地心历险记观后感

2015/06/15 职场文书

银行工作心得体会范文

2016/01/23 职场文书

解决python存数据库速度太慢的问题

2021/04/23 Python

Html5大屏数据可视化开发的实现

2021/06/11 HTML / CSS

Java Spring Lifecycle的使用

2022/05/06 Java/Android