编程 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实现表单验证效果(非常不错)

Jan 18 HTML / CSS

CSS3 box-sizing属性

Apr 17 HTML / CSS

HTML5 CSS3给网站设计带来出色效果

Jul 16 HTML / CSS

基于CSS3实现的漂亮Menu菜单效果代码

Sep 10 HTML / CSS

CSS3条纹背景制作的实战攻略

May 31 HTML / CSS

详解如何用canvas画一个微笑的表情

Mar 14 HTML / CSS

html5菜单折纸效果

Apr 22 HTML / CSS

2014年圣诞节倒计时网页的制作过程

Dec 05 HTML / CSS

深入解析HTML5 Canvas控制图形矩阵变换的方法

Mar 24 HTML / CSS

如何给HTML标签中的文本设置修饰线

Nov 18 HTML / CSS

recorder.js 基于Html5录音功能的实现

May 26 HTML / CSS

CSS 圆形进度栏

Apr 06 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中利用wsdl创建标准webservice的实现代码

2011/12/07 PHP

php的dl函数用法实例

2014/11/06 PHP

在修改准备发的批量美化select+可修改select时，在非IE下发现了几个问题

2007/01/09 Javascript

基于jquery实现的类似百度搜索的输入框自动完成功能

2011/08/23 Javascript

javascript判断是否按回车键并解决浏览器之间的差异

2014/05/13 Javascript

详解JavaScript UTC时间转换方法

2016/01/07 Javascript

14 个折磨人的 JavaScript 面试题

2016/08/08 Javascript

vue.js入门教程之绑定class和style样式

2016/09/02 Javascript

a标签置灰不可点击的实现方法

2017/02/06 Javascript

Node.js调试技术总结分享

2017/03/12 Javascript

element-ui循环显示radio控件信息的方法

2018/08/24 Javascript

JavaScript变速动画函数封装添加任意多个属性

2019/04/03 Javascript

实例分析JS中的相等性判断===、 ==和Object.is()

2019/11/17 Javascript

详解JS预解析原理

2020/06/16 Javascript

详解React 元素渲染

2020/07/07 Javascript

微信小程序中target和currentTarget的区别小结

2020/11/06 Javascript

JavaScript实现京东快递单号查询

2020/11/30 Javascript

[02:54]DOTA2英雄基础教程暗影牧师戴泽

2013/12/05 DOTA

linux系统使用python监测网络接口获取网络的输入输出

2014/01/15 Python

Python实现给qq邮箱发送邮件的方法

2015/05/28 Python

python函数式编程学习之yield表达式形式详解

2018/03/25 Python

基于python3 OpenCV3实现静态图片人脸识别

2018/05/25 Python

Django 路由系统URLconf的使用

2018/10/11 Python

在python中利用opencv简单做图片比对的方法

2019/01/24 Python

python3实现二叉树的遍历与递归算法解析(小结)

2019/07/03 Python

django写用户登录判定并跳转制定页面的实例

2019/08/21 Python

Django vue前后端分离整合过程解析

2020/11/20 Python

HTML5 Canvas基本线条绘制的实例教程

2016/03/17 HTML / CSS

Gap英国官网：Gap UK

2018/07/18 全球购物

Bluebella德国官网：英国性感内衣和睡衣品牌

2019/11/08 全球购物

Unix/Linux开发面试题

2016/08/16 面试题

入党思想汇报

2014/01/05 职场文书

先进事迹报告会主持词

2014/04/02 职场文书

竞选纪律委员演讲稿

2014/09/13 职场文书

运动会跳远广播稿

2015/08/19 职场文书

创业计划书之面包店

2019/09/12 职场文书