使用JS+CSS3技術(shù)：讓你的名字動起來

2024-07-11 08:28:49

字體：大中小

供稿：網(wǎng)友

使用技術(shù)：JS+CSS3

瀏覽器支持：IE9，F(xiàn)ireFox，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>

上一篇：使用position:fixed屬性讓DIV居中

下一篇：CSS HACK收集：關(guān)于IE6/FF/google等瀏覽器hack的方法詳細(xì)

發(fā)表評論

共有條評論