js烟花效果[三],背景式以3D立体展现到渐渐消失

发布时间：2018-08-16 19:14:57 所属栏目：活动来源：站长网

导读：连续看了两款（烟花1、烟花2）js烟花特效，怎么样？网页制作有趣吧，您是一名站长吗？还是一个网页爱好者，如果您还只是网页菜鸟的话，建议您从网页学习转向网站运营，然后实现营利，请看烈火独家发表的文章《手把手教你从建站、SEO、推广到赚钱》，当然这

　　连续看了两款（烟花1、烟花2）js烟花特效，怎么样？网页制作有趣吧，您是一名站长吗？还是一个网页爱好者，如果您还只是网页菜鸟的话，建议您从网页学习转向网站运营，然后实现营利，请看烈火独家发表的文章《手把手教你从建站、SEO、推广到赚钱》，当然这是题外话，我们主要来看本文的js特效吧。

　　特效介绍：

　　貌似3D效果的JS烟花背景特效代码，烟花展开的一瞬间，很漂亮，很有空间感，漂漂洒洒，慢慢退去。

　　实例效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>烟花背景代码 - Liehuo.Net</title> </head> <style type="text/css"> .fire{display:block; overflow:hidden; font-size:12px; position:absolute}; body{overflow:hidden; background:#000} html{overflow:hidden; background:#000} </style> <body> </body> <script type="text/javascript"> var Fire = function(r, color) { this.radius = r || 12; this.color = color || "FF6600"; this.xpos = 0; this.ypos = 0; this.zpos = 0; this.vx = 0; this.vy = 0; this.vz = 0; this.mass = 1; this.p = document.createElement("span"); this.p.className = "fire"; this.p.innerHTML = "*"; this.p.style.fontSize = this.radius + "px"; this.p.style.color = "#" + this.color; } Fire.prototype = { append: function(parent) { parent.appendChild(this.p); }, setSize: function(scale) { this.p.style.fontSize = this.radius * scale + "px"; }, setPosition:function(x, y) { this.p.style.left = x + "px"; this.p.style.top = y + "px"; }, setVisible: function(b) { this.p.style.display = b ? "block" : "none"; } } var fireworks = function() { var fires = new Array(); var count = 100; var fl = 250; var vpx = 500; var vpy = 300; var gravity = .3; var floor = 200; var bounce = -.8; var timer; return { init: function() { for (var i=0; i<count; i++) { var color = 0xFF0000; color = (Math.random() * 0xFFFFFF).toString(16).toString().split(".")[0]; while(color.length < 6) { color = "0" + color; } var fire = new Fire(12, color); fires.push(fire); fire.ypos = -100; fire.vx = Math.random() * 6 - 3; fire.vy = Math.random() * 6 - 3; fire.vz = Math.random() * 6 - 3; fire.append(document.body); } var that = this; timer = setInterval(function() { for (var i=0;i<count; i++) { that.move(fires[i]); } }, 30); }, move: function(fire) { fire.vy += gravity; fire.xpos += fire.vx; fire.ypos += fire.vy; fire.zpos += fire.vz; if (fire.ypos > floor) { fire.ypos = floor; fire.vy *= bounce; } if (fire.zpos > -fl) { var scale = fl/ (fl+fire.zpos); fire.setSize(scale); fire.setPosition(vpx + fire.xpos * scale, vpy + fire.ypos * scale); fire.setVisible(true); } else { fire.setVisible(false); } } } } fireworks().init(); </script> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!