编程 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实现聊天框小尖角、气泡效果

Apr 04 HTML / CSS

魔幻般冒泡背景的CSS3按钮动画

Feb 27 HTML / CSS

css3实现背景动态渐变效果

Dec 10 HTML / CSS

详解CSS3+JS完美实现放大镜模式

Dec 03 HTML / CSS

HTML5的video标签的浏览器兼容性增强方案分享

May 19 HTML / CSS

前端canvas动画如何转成mp4视频的方法

Jun 17 HTML / CSS

一张图片能隐含千言万语之隐藏你的程序代码

Dec 13 HTML / CSS

html5+css3实现一款注册表单实例

Apr 17 HTML / CSS

使用纯HTML5编写一款网页上的时钟的代码分享

Nov 16 HTML / CSS

HTML5 canvas基本绘图之图形组合

Jun 27 HTML / CSS

html5是什么_动力节点Java学院整理

Jul 07 HTML / CSS

HTML5输入框下拉菜单功能的示例代码

Sep 08 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实现小型站点广告管理（修正版）

2006/10/09 PHP

PHP学习之PHP表达式

2006/10/09 PHP

PHP 用数组降低程序的时间复杂度

2009/12/04 PHP

PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例

2015/05/12 PHP

PHP中header用法小结

2016/05/23 PHP

深入理解PHP原理之执行周期分析

2016/06/01 PHP

PHP实现的ID混淆算法类与用法示例

2018/08/10 PHP

js 获取元素下面所有li的两种方法

2014/04/14 Javascript

angular.element方法汇总

2015/01/07 Javascript

原生js页面滚动延迟加载图片

2015/12/20 Javascript

基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

2016/05/12 Javascript

关于验证码在IE中不刷新的快速解决方法

2016/09/23 Javascript

微信小程序解决请求服务器手机预览请求不到数据的方法

2017/01/04 Javascript

js实现贪吃蛇小游戏（容易理解）

2017/01/22 Javascript

angularjs中的$eval方法详解

2017/04/24 Javascript

jQuery extend()详解及简单实例

2017/05/06 jQuery

利用node.js如何搭建一个简易的即时响应服务器

2017/05/28 Javascript

jQuery修改DOM结构_动力节点Java学院整理

2017/07/05 jQuery

微信小程序自定义toast实现方法详解【附demo源码下载】

2017/11/28 Javascript

Python在线运行代码助手

2016/07/15 Python

python中MethodType方法介绍与使用示例

2017/08/03 Python

Python3利用Dlib19.7实现摄像头人脸识别的方法

2018/05/11 Python

Python中如何将一个类方法变为多个方法

2019/12/30 Python

python使用numpy实现直方图反向投影示例

2020/01/17 Python

Python通过文本和图片生成词云图

2020/05/21 Python

Django实现内容缓存实例方法

2020/06/30 Python

详解CSS3的box-shadow属性制作边框阴影效果的方法

2016/05/10 HTML / CSS

李宁官方网店：中国运动品牌

2017/11/02 全球购物

英国美发和美容产品商城：HQhair

2019/02/08 全球购物

高三毕业寄语

2014/04/10 职场文书

勤俭节约倡议书

2014/04/14 职场文书

高职教师先进事迹材料

2014/08/24 职场文书

学生实习证明范文

2014/09/28 职场文书

指导教师推荐意见

2015/06/05 职场文书

庆七一活动简报

2015/07/20 职场文书

python自动化测试通过日志3分钟定位bug

2021/11/20 Python