编程 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气泡 css3关键帧动画创建的动态通知气泡

Feb 26 HTML / CSS

使用css3背景渐变中的透明度来设置不同颜色的背景渐变

Mar 31 HTML / CSS

css3设置box-pack和box-align让div里面的元素垂直居中

Sep 01 HTML / CSS

css3动画效果小结(推荐)

Jul 25 HTML / CSS

Html5之svg可缩放矢量图形_动力节点Java学院整理

Jul 17 HTML / CSS

html通过canvas转成base64的方法

Jul 18 HTML / CSS

HTML5 实现一个访问本地文件的实例

Dec 13 HTML / CSS

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

Dec 30 HTML / CSS

HTML5注册页面示例代码

Mar 27 HTML / CSS

HTML5 canvas基本绘图之图形组合

Jun 27 HTML / CSS

canvas 实现 github404动态效果的示例代码

Nov 15 HTML / CSS

HTML5离线应用与客户端存储的实现

May 03 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

Zend Studio去除编辑器的语法警告设置方法

2012/10/24 PHP

php获取bing每日壁纸示例分享

2014/02/25 PHP

php抓取网站图片并保存的实现方法

2015/10/29 PHP

PHP函数import_request_variables()用法分析

2016/04/02 PHP

php结合mysql与mysqli扩展处理事务的方法

2016/06/29 PHP

php基于openssl的rsa加密解密示例

2016/07/11 PHP

PHP5.6读写excel表格文件操作示例

2019/02/26 PHP

iis6+javascript Add an Extension File

2007/06/13 Javascript

让 JavaScript 轻松支持函数重载 (Part 2 - 实现)

2009/08/04 Javascript

javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象

2010/01/15 Javascript

被遗忘的javascript的slice() 方法

2015/04/20 Javascript

jquery插件unobtrusive实现片段式加载

2015/06/15 Javascript

JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码

2015/09/17 Javascript

BootStrap3学习笔记(一)之网格系统

2016/05/20 Javascript

JS控制层作圆周运动的方法

2016/06/20 Javascript

vue中v-for加载本地静态图片方法

2018/03/03 Javascript

自定义vue组件发布到npm的方法

2018/05/09 Javascript

浅谈AngularJS中$http服务的简单用法

2018/05/15 Javascript

微信小程序wx.uploadfile 本地文件转base64的实现代码

2018/06/28 Javascript

vue中的数据绑定原理的实现

2018/07/02 Javascript

vue-router中的hash和history两种模式的区别

2018/07/17 Javascript

vue 实现移动端键盘搜索事件监听

2019/11/06 Javascript

详解一些适用于Node.js的命名约定

2019/12/08 Javascript

Vuex模块化应用实践示例

2020/02/03 Javascript

[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦

2016/02/27 DOTA

Python初学者需要注意的事项小结(python2与python3)

2018/09/26 Python

Python设计模式之装饰模式实例详解

2019/01/21 Python

python获取交互式ssh shell的方法

2019/02/14 Python

django 微信网页授权认证api的步骤详解

2019/07/30 Python

python 爬取英雄联盟皮肤并下载的示例

2020/12/04 Python

详解BeautifulSoup获取特定标签下内容的方法

2020/12/07 Python

大学生家政服务项目创业计划书

2014/01/30 职场文书

安全生产演讲稿

2014/05/09 职场文书

保安公司服务承诺书

2014/05/28 职场文书

反四风对照检查材料

2014/09/22 职场文书

2015年初三班主任工作总结

2015/05/21 职场文书