使用技术:JS+CSS3
浏览器支持:IE9,FireFox,Chrome
效果图:
![](http://img.my.csdn.net/uploads/201304/26/1366958917_4863.png)
代码下载: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>
分享到:
相关推荐
看下你名字炫不炫 一直在动哦 使用技术:JS+CSS3 浏览器支持:支持CSS3的浏览器都行,像IE9,Chrome,FireFox...
在实现3D效果的过程中,CSS3的`transform`属性起到了关键作用,它允许元素在空间中进行位移、旋转和缩放。结合`transition`属性,可以创建平滑的过渡效果。此外,JavaScript代码负责处理用户的交互事件,如鼠标悬停...
在Web上实现3D效果通常依赖于CSS3的transform和perspective属性,以及JavaScript的动态计算。这些技术允许开发者创建出具有深度感的3D空间,用户可以通过鼠标或触摸动作来改变视角,仿佛在转动一个真实的相册。通过...
Karrot Slider是一款纯Javascript和CSS3制作的自动播放的幻灯片插件。该幻灯片没有任何外部依赖,内置有8种不同的动画过渡效果。该幻灯片支持响应式图片设计模式,也可以制作为全屏幻灯片模式。
- "jiaoben19318":这个名字不太明确,但可能是一个示例文件,例如一个包含了 Animate.css 动画效果的 HTML 文件,供用户参考和学习。 总的来说,Animate.css 是一个强大的 CSS 动画库,尤其适合用于创建各种文字...
【压缩包子文件的文件名称】"CSS3_js_3dxzmm"可能是指使用CSS3和JavaScript实现的3D旋转木马效果的源代码或资源文件。这个名字可能包含了一些关键类名或模块名称,暗示了代码的组织结构。 在这个3D旋转木马项目中,...
而"jiaoben5150"这个名字看起来像是一个具体的文件,可能是包含示例代码的CSS或HTML文件,用于演示如何实现上述的鼠标经过CSS3按钮动画特效。 总之,通过CSS3的`transition`和`keyframes`,我们可以轻松地为网页...
这个压缩包的名字本身就是一个充满爱意的时间戳,可能代表了某个特殊的日子或时刻,为这份表白增添了更多的情感色彩。 一、表白网页概述 表白网页是一种利用HTML、CSS和JavaScript等前端技术制作的交互式网页。...
CSS3的过渡效果、动画和3D转换也能为设计增添动感和深度。JavaScript库如jQuery、Vue.js或React.js则帮助简化页面交互和数据绑定,使用户与内容之间有更自然的互动。 标签“表白”、“离别”、“伤感”揭示了H5内容...
抽屉菜单的名字来源于它的开合效果,就像一个从屏幕边缘滑出的抽屉。这种设计尤其适用于移动设备,因为它们可以保持页面简洁,同时确保用户能够方便地访问各种功能或链接。 在您提供的资源中,我们可以看到一个名为...
3. CSS文件:用于控制页面布局和样式。 4. 图片资源:3D模型的纹理图片或背景图片。 5. JSON或其他数据文件:可能存储了3D模型的结构信息。 在使用这份资源时,开发者需要理解基本的3D图形原理,熟悉JavaScript和...
jQuery超炫联系方式表单美化代码通过CSS样式和jQuery脚本,将普通的文本输入框、选择下拉菜单、复选框、单选按钮等元素转变为具有动态效果的组件。这些效果可能包括鼠标悬停时的色彩变化、点击时的反馈动画,以及...
3. **CSS动画**:通过CSS3的`transition`和`animation`属性,可以实现平滑的过渡和动画效果,如图片切换时的淡入淡出、滑动等。 4. **响应式设计**:为了适应不同设备的屏幕尺寸,图片循环效果需要具有响应式布局。...
3. `playful.html`:这个名字暗示了这是一个充满趣味性的动画效果,可能是文字跳跃、旋转或者与其他元素互动。 4. `crossword.html`:可能是一个与填字游戏相关的文字动画,文字在网格中出现、消失或者组合成新的...
CSS文件则负责样式设计,让网页看起来更具吸引力;JavaScript文件则处理动态效果和交互逻辑;如果是图片或音频,可能是为了营造浪漫的背景。 在实际开发中,开发者会结合HTML来定义网页的结构,CSS来定义网页的样式...
压缩包内的“数字滚动”文件很可能是组件的源代码,包括Vue组件文件、样式表(CSS)以及可能的JavaScript逻辑。在Vue组件中,开发者可能会定义一个名为`<digit-roller>`的组件,包含数据属性(如当前数字、目标数字...
3. `css` - CSS文件夹存放着样式表,这些样式表定义了模板的布局、颜色、字体等视觉元素,使得后台界面符合设计描述。 4. `img` - 图片资源文件夹,包含了模板中所使用的各种图像,如图标、背景图、示例图片等,这些...
这个名字可能表示这是一个开源项目,"master"通常代表项目的主分支,而“csdn”可能是中国著名的IT社区“CSDN(China Software Developer Network)”的缩写,意味着这个抽奖程序可能在CSDN平台上共享或托管。...
3. **调整视觉效果**:根据个人喜好改变颜色、图案、动画效果等,以符合你心目中的浪漫场景。 4. **测试运行**:每次修改后都要运行代码,确保程序正常运行,没有语法错误或逻辑问题。 5. **保存与分享**:完成...
首先,"PageOne"这个名字暗示了这是一个单一页面的设计,它可能包含了网页的所有内容都在一个长滚动页面上,通过精心布局和交互设计,使用户可以方便地浏览和交互。这种设计方式在现代网页设计中非常流行,因为它...