使用技术:JS+CSS3
浏览器支持:IE9,FireFox,Chrome
效果图:
代码下载:http://download.csdn.net/detail/guoxuepeng123/5303831
源码分享:
<!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="CSDN";//输入你的名字
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-animate-it,css3/jquery插件,用于在元素进入视图时对其进行动画处理
pro-html5-css3-design-patterns-master
动画制作2.0#CSS-----动画练习
Html5炫酷进度条-html5-css3-progress-bar 更多资源: http://cleopard.download.csdn.net
css那些事儿---csscss那些事儿---css
clip样式实现炫酷简单CSS动画特效----RGB走马灯边框线 直接复制可用 新手练习可用
HTML5+CSS3移动商城-分类
HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...
NULL 博文链接:https://rainsilence.iteye.com/blog/1190204
css动画 css-animation-101.pdf
CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo
静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计.zipHTML+css的家乡美-静态站设计....
css3-image-float-reversal.rar,挺有意思的一个css文件
由于qss不支持css3的box-shadow效果,故而该工程中,采用类似android九点图的方式,把背景图截为9分,即4角4边一中心,并把4角4边重绘于待修饰的控件的边缘,从而模拟了box-shadow效果。
CSS3实现烟花特效-图片+css
CSS3动画-奔跑吧!绵羊
看下你名字炫不炫 一直在动哦 使用技术:JS+CSS3 浏览器支持:支持CSS3的浏览器都行,像IE9,Chrome,FireFox...
响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版响应式Web设计—HTML5和CSS3实战---kindle电子书mobi版
HTML CSS-------
28种CSS3炫酷loading页面加载动画特效代码,兼容主流浏览器 使用方法: 1、在head区域引入样式表文件demo.css和loaders.css 2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可...