首页
网络新闻
seo优化
网络营销
网络推广
建站知识
网络安全
网络编程
网络编程
奇闻怪事
主页
/
建站知识
/
使用JS+CSS3技术:让你的名字动起来
建站知识
2021-07-03 08:43
www.168986.cn
长沙网站建设
使用技术: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></p> <p> <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;</p> <p> a.font = "bold 200pt Arial"; a.fillStyle = "rgb(255,255,255)"; a.fillText(inputName, 50, 300); var px = [];</p> <p> 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] ); } } }</p> <p> 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++;</p> <p> } }; }; 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 ); } }</p> <p> // grow actuals tendrils if(tt.length > 0) { for(t in tt) { tt[t].grow(1.0, 1.0, 0.02); } }</p> <p> } </p> <p> 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制作3D效果文字具体实现样式
下一篇:
clearfix:after清除浮动的用法及测试代码
长沙网站设计
平顶山网是什么网站 什么是平顶山网
网站代运营的优势 如何选择合适的网站代运营服
河南网站建设要求 河南网站建设公司
tag是什么意思啊 标签Tag的含义及其重要性
华众虚拟主机管理系统
国外代理服务器的优点 国外代理服务器的缺点
CMS系统的优势 什么是CMS系统
购物网站建设:购物网站建设多少钱
http 500 内部服务器错误
云南网站建设 云南网站安全与维护
网站建站架构搭建 网站建站维护与优化
白山网的优势与前景 白山网的生活服务频道
怎么建立一个网站
linux服务器配置与管理
美国vpn服务器价格 美国vpn服务器安全性
电商网站开发:如何开发一个成功的电商网站
狼蚁网络搜索
狼蚁网络导航
长沙seo优化
平顶山网是什么网站 什么是平顶山网
网站代运营的优势 如何选择合适的网站代运营服
河南网站建设要求 河南网站建设公司
tag是什么意思啊 标签Tag的含义及其重要性
华众虚拟主机管理系统
长沙网络营销
1
免费私人服务器
2
南宁企业建站
3
html网站模板建站
4
中国域名服务商有哪些?2021年中国十大域名注册
5
网页设计制作详细流程
长沙网站建设
为什么认为自助建站不适合SEO?自助建站工具搭
XHTML常用标签介绍
IE7与web标准设计(3)
css3实现背景模糊的三种方式(小结)
CSS中使用负margin值来调整居中位置