编程 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 给页面加个半圆形导航条主要利用旋转和倾斜样式

Feb 10 HTML / CSS

利用CSS3的线性渐变linear-gradient制作边框的示例

Jun 02 HTML / CSS

css3 实现元素弧线运动的示例代码

Apr 24 HTML / CSS

HTML5等待加载动画效果

Jul 27 HTML / CSS

HTML5是否真的可以取代Flash

Feb 10 HTML / CSS

使用HTML5做个画图板的方法介绍

May 03 HTML / CSS

配置H5的滚动条样式的示例代码

Mar 09 HTML / CSS

canvas探照灯效果的示例代码

Nov 30 HTML / CSS

AmazeUI 面板的实现示例

Aug 17 HTML / CSS

AmazeUI 单选框和多选框的实现示例

Aug 18 HTML / CSS

boostrap modal 闪现问题的解决方法

Sep 01 HTML / CSS

CSS的calc函数用法小结

Jun 25 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算开始时间到过期时间的相隔的天数

2011/01/12 PHP

比较详细PHP生成静态页面教程

2012/01/10 PHP

PHP面向对象精要总结

2014/11/07 PHP

PHP处理数组和XML之间的互相转换

2016/06/02 PHP

web页面数据展示新想法(json)

2010/06/08 Javascript

始终在屏幕中间显示Div的代码(css+js)

2011/03/10 Javascript

让innerText在firefox火狐和IE浏览器都能用的写法

2011/05/14 Javascript

ASP.NET jQuery 实例10 动态修改hyperlink的URL值

2012/02/03 Javascript

十个迅速提升JQuery性能让你的JQuery跑得更快

2012/12/10 Javascript

jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

2013/01/23 Javascript

深入理解JavaScript是如何实现继承的

2013/12/12 Javascript

JavaScript和JQuery的鼠标mouse事件冒泡处理

2015/06/19 Javascript

jQuery中事件与动画的总结分享

2016/05/24 Javascript

JS原型链详解及示例代码

2016/09/06 Javascript

JavaScript中匿名函数的递归调用

2017/01/22 Javascript

分享一道关于闭包、bind和this的面试题

2017/02/20 Javascript

jQuery简单绑定单个事件的方法示例

2017/06/10 jQuery

Vue2.0 组件传值通讯的示例代码

2017/08/01 Javascript

理解 JavaScript EventEmitter

2018/03/29 Javascript

node app 打包工具pkg的具体使用

2019/01/17 Javascript

vuex的数据渲染与修改浅析

2020/11/26 Vue.js

[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛胜者组赛BO3 第一场

2019/08/22 DOTA

Python操作json的方法实例分析

2018/12/06 Python

Python 中包/模块的 `import` 操作代码

2019/04/22 Python

详解python调用cmd命令三种方法

2019/07/08 Python

Python 分发包中添加额外文件的方法

2019/08/16 Python

Python使用Slider组件实现调整曲线参数功能示例

2019/09/06 Python

在django中使用post方法时,需要增加csrftoken的例子

2020/03/13 Python

python单元测试框架pytest的使用示例

2020/10/07 Python

python快速安装OpenCV的步骤记录

2021/02/22 Python

简单介绍CSS3中Media Query的使用

2015/07/07 HTML / CSS

潘多拉珠宝美国官方网站：Pandora US

2020/06/18 全球购物

教师政风行风自查自纠报告

2014/10/21 职场文书

立案决定书范文

2015/06/24 职场文书

学生会工作感言

2015/08/07 职场文书

SpringBoot整合JWT的入门指南

2021/06/29 Java/Android