当前位置：移动技术网 > IT编程>网页制作>CSS > 使用JS+CSS3技术：让你的名字动起来

使用JS+CSS3技术：让你的名字动起来

2019年07月25日 | 移动技术网IT编程 | 我要评论

日本美女人体,qq农场赚钱,火影640

使用技术：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>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

CSS3实现缺角矩形，折角矩形以及缺角边框

这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小... [阅读全文]
详解CSS3新增的背景属性

CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性... [阅读全文]
css3 flex布局 justify-content:space-between 最后一行左对齐

这篇文章主要介绍了css3 flex布局 justify-content:space-between 最后一行左对齐,文中通过示例代码介绍的非常详细，对大家的学... [阅读全文]
详解如何使用CSS3中的结构伪类选择器和伪元素选择器

这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们... [阅读全文]
CSS3 旋转立方体问题详解

这篇文章主要介绍了CSS3 旋转立方体问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
Grid 宫格常用布局的实现

这篇文章主要介绍了Grid 宫格常用布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
css3一个简易的 LED 数字时钟实现方法

这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着... [阅读全文]
2分钟教你实现环形/扇形菜单(基础版)

这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来... [阅读全文]
CSS3实现网站商品展示效果图

这篇文章主要介绍了CSS3实现网站商品展示效果图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习... [阅读全文]
如何用border-image实现文字气泡边框的示例代码

这篇文章主要介绍了如何用border-image实现文字气泡边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋... [阅读全文]

网友评论


验证码：

使用JS+CSS3技术：让你的名字动起来

2019年07月25日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论