编程 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 21 HTML / CSS

css3中transition属性详解

Sep 02 HTML / CSS

结合CSS3的新特性来总结垂直居中的实现方法

May 30 HTML / CSS

css3实现冲击波效果的示例代码

Jan 11 HTML / CSS

CSS3解析抖音LOGO制作的方法步骤

Apr 11 HTML / CSS

利用HTML5绘制点线面组成的3D图形的示例

May 12 HTML / CSS

用html5的canvas和JavaScript创建一个绘图程序的简单实例

Jul 06 HTML / CSS

利用Storage Event实现页面间通信的示例代码

Jul 26 HTML / CSS

HTML5的postMessage的使用手册

Dec 19 HTML / CSS

canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法

Jan 18 HTML / CSS

使用iframe+postMessage实现页面跨域通信的示例代码

Jan 14 HTML / CSS

纯html+css实现Element loading效果

Aug 02 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面向对象全攻略（六）__set() __get() __isset() __unset()的用法

2009/09/30 PHP

php中判断文件存在是用file_exists还是is_file的整理

2012/09/12 PHP

PHPMailer邮件发送的实现代码

2013/05/04 PHP

php对数组排序代码分享

2014/02/24 PHP

javascript 面向对象全新理练之原型继承

2009/12/03 Javascript

使用JQUERY Tabs插件宿主IFRAMES

2010/01/01 Javascript

JS基于myFocus库实现各种功能的tab选项卡切换效果

2015/09/19 Javascript

AngularJS实现一次监听多个值发生的变化

2016/08/31 Javascript

AngularJS中关于ng-class指令的几种实现方式详解

2016/09/17 Javascript

基于BootStrap multiselect.js实现的下拉框联动效果

2017/07/28 Javascript

Element Table的row-class-name无效与动态高亮显示选中行背景色

2018/11/30 Javascript

vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

2019/05/14 Javascript

Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法

2019/09/03 Javascript

javascript设计模式 ? 策略模式原理与用法实例分析

2020/04/21 Javascript

[02:58]献给西雅图的情书_高清

2014/05/29 DOTA

Python探索之爬取电商售卖信息代码示例

2017/10/27 Python

Python编程给numpy矩阵添加一列方法示例

2017/12/04 Python

使用Python+Splinter自动刷新抢12306火车票

2018/01/03 Python

详解python OpenCV学习笔记之直方图均衡化

2018/02/08 Python

Python实现的合并两个有序数组算法示例

2019/03/04 Python

Tensorflow tf.tile()的用法实例分析

2020/05/22 Python

pytorch加载自己的图像数据集实例

2020/07/07 Python

Python 开发工具通过 agent 代理使用的方法

2020/09/27 Python

CAT鞋英国官网：坚固耐用的靴子和鞋

2016/10/21 全球购物

澳大利亚自然和有机的健康美容产品一站式商店：Ziani Beauty

2017/12/28 全球购物

新浪微博实习心得体会

2014/01/27 职场文书

库房管理员岗位职责

2014/03/09 职场文书

财务担保书范文

2014/04/02 职场文书

司法建议书范文

2014/05/13 职场文书

全国文明单位申报材料

2014/05/31 职场文书

2014年检验科工作总结

2014/11/22 职场文书

2014年个人思想工作总结

2014/11/27 职场文书

委托书英文

2015/01/28 职场文书

个人自荐书范文

2015/03/09 职场文书

2016年春季运动会加油稿

2015/07/22 职场文书

如何更改Win11声音输出设备？Win11声音输出设备四种更改方法

2022/04/08 数码科技