编程 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 相关文章推荐

使用CSS实现阅读进度条

Feb 27 HTML / CSS

css3弹性盒模型实例介绍

May 27 HTML / CSS

CSS3动画animation实现云彩向左滚动

May 09 HTML / CSS

css3实现3d旋转动画特效

Mar 10 HTML / CSS

html+css3实现的登录界面

Dec 09 HTML / CSS

基于html5 canvas实现漫天飞雪效果实例

Sep 10 HTML / CSS

使用html5 canvas 画时钟代码实例分享

Nov 11 HTML / CSS

在HTML5中使用MathML数学公式的简单讲解

Feb 19 HTML / CSS

JavaScript+Canvas实现自定义画板的示例代码

May 13 HTML / CSS

Html5页面点击遮罩层背景关闭遮罩层

Nov 30 HTML / CSS

小程序实现悬浮按钮的全过程记录

Oct 16 HTML / CSS

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

Oct 16 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中$_REQUEST、$_POST、$_GET的区别和联系小结

2011/11/23 PHP

PHP新手用的Insert和Update语句构造类

2012/03/31 PHP

解析php入库和出库

2013/06/25 PHP

php时区转换转换函数

2014/01/07 PHP

php最简单的删除目录与文件实现方法

2014/11/28 PHP

PHP内存使用情况如何获取

2015/10/10 PHP

基于jquery的tab切换 js原理

2010/04/01 Javascript

输入密码检测大写是否锁定js实现代码

2012/12/03 Javascript

js取得url地址参数实例

2013/02/22 Javascript

js判断undefined变量类型使用typeof

2013/06/03 Javascript

JS删除字符串中重复字符方法

2014/03/09 Javascript

基于javascript实现的搜索时自动提示功能

2014/12/26 Javascript

JavaScript中setUTCMilliseconds()方法的使用详解

2015/06/12 Javascript

jQuery实现返回顶部功能

2016/02/23 Javascript

AngularJS优雅的自定义指令

2016/07/01 Javascript

PHP抓取HTTPS内容和错误处理的方法

2016/09/30 Javascript

有趣的bootstrap走动进度条

2016/12/01 Javascript

jQuery点击弹出层弹出模态框点击模态框消失代码分享

2017/01/21 Javascript

详解用webpack把我们的业务模块分开打包的方法

2017/07/20 Javascript

移动端网页开发调试神器Eruda的介绍与使用技巧

2017/10/30 Javascript

利用js实现前后台传送Json的示例代码

2018/03/29 Javascript

JS实现图片拖拽交换效果

2018/11/30 Javascript

vue实现移动端轻量日期组件不依赖第三方库的方法

2019/04/28 Javascript

three.js 将图片马赛克化的示例代码

2020/07/31 Javascript

[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08

2020/11/11 DOTA

Python中死锁的形成示例及死锁情况的防止

2016/06/14 Python

python 添加用户设置密码并发邮件给root用户

2016/07/25 Python

keras 多任务多loss实例

2020/06/22 Python

python实现企业微信定时发送文本消息的示例代码

2020/11/24 Python

使用css如何制作时间ICON方法实践

2012/11/12 HTML / CSS

很酷的小工具和电子产品商城：GearBest

2016/11/19 全球购物

医院护士见习期自我鉴定

2014/04/10 职场文书

伦敦奥运会口号

2014/06/13 职场文书

超级实用！五步法则，教你写好年终工作总结

2019/12/05 职场文书

java解析XML详解

2021/07/09 Java/Android

前端vue+express实现文件的上传下载示例

2022/02/18 Vue.js