html中制作烟花的效果代码,css3+js实现烟花绽放的动画效果(代码示例)
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
首先我们来看看效果:
动画的实现原理:
动画使用了两个关键帧(keyframes):
一个是烟花筒上升的轨迹,另一个是烟花绽放中的火星碎片。在这里你可以看到正在进行的基本草图:
每个烟花筒沿着场地底部的线分配一个随机的起始位置。它还在标记的区域内分配了一个随机目标。当烟花筒接近其目标点时,它会缩小为不可见(0x0像素)。
此时,耀斑变得可见。这些实际上是一系列以径向方式向外指向的DIV,在向外的尖端有一种颜色 - 就像火柴棍一样。为了模拟爆炸,他们只是增加了长度,使灯光向外移动。
JavaScript用于:
1、将所有必需的元素添加到页面(DOM);
2、为每个烟花筒创建和分配关键帧 ; 和
3、指定颜色并将每个光斑旋转到正确的位置。
代码示例:
html代码:
烟花绽放
css代码(css-fireworks.css)@-webkit-keyframes explosion {
from {
width: 0;
opacity: 0;
}
33% {
width: 0;
opacity: 0;
}
34% {
width: 10px;
opacity: 1.0;
}
40% {
width: 80px;
opacity: 1.0;
}
to {
width: 90px;
opacity: 0;
}
}
@-moz-keyframes explosion {
from {
width: 0;
opacity: 0;
}
33% {
width: 0;
opacity: 0;
}
34% {
width: 10px;
opacity: 1.0;
}
40% {
width: 80px;
opacity: 1.0;
}
to {
width: 90px;
opacity: 0;
}
}
#stage {
position: relative;
width: 600px;
height: 400px;
margin: 100px auto;
background: #000 url(img/outerspace.jpg);
}
.launcher {
position: absolute;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
background: red;
border-bottom: 3px solid yellow;
}
.launcher div {
position: absolute;
opacity: 0;
-webkit-animation-name: explosion;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: explosion;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
left: 3px;
top: 3px;
width: 10px;
height: 4px;
border-right: 4px solid yellow;
border-radius: 2px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}
js代码(css-fireworks.js)document.addEventListener("DOMContentLoaded", function() {
var num_launchers = 12;
var num_flares = 20;
var flare_colours = ['red', 'aqua', 'violet', 'yellow', 'lightgreen', 'white', 'blue'];
var cssIdx = document.styleSheets.length - 1;
function myRandom(from, to)
{
return from + Math.floor(Math.random() * (to-from));
}
var keyframes_template = "from { left: LEFTFROM%; top: 380px; width: 6px; height: 12px; }\n"
+ "33% { left: LEFTTOP%; top: TOPTOPpx; width: 0; height: 0; }\n"
+ " to { left: LEFTEND%; top: BOTBOTpx; width: 0; height: 0; }";
for(var i=0; i < num_launchers; i++) {
leftfrom = myRandom(15, 85);
lefttop = myRandom(30, 70);
toptop = myRandom(20, 200);
leftend = lefttop + (lefttop-leftfrom)/2;
botbot = toptop + 100;
csscode = keyframes_template;
csscode = csscode.replace(/LEFTFROM/, leftfrom);
csscode = csscode.replace(/LEFTTOP/, lefttop);
csscode = csscode.replace(/TOPTOP/, toptop);
csscode = csscode.replace(/LEFTEND/, leftend);
csscode = csscode.replace(/BOTBOT/, botbot);
try { // WebKit browsers
csscode2 = "@-webkit-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }
try { // Mozilla browsers
csscode2 = "@-moz-keyframes flight_" + i + " {\n" + csscode + "\n}";
document.styleSheets[cssIdx].insertRule(csscode2, 0);
} catch(e) { }
}
for(var i=0; i < num_launchers; i++) {
var rand = myRandom(0, flare_colours.length - 1);
var rand_colour = flare_colours[rand];
var launch_delay = myRandom(0,100) / 10;
csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") {\n"
+ " -webkit-animation-name: flight_" + i + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-name: flight_" + i + ";\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
csscode = ".launcher:nth-child(" + num_launchers + "n+" + i + ") div {"
+ " border-color: " + rand_colour + ";\n"
+ " -webkit-animation-delay: " + launch_delay + "s;\n"
+ " -moz-animation-delay: " + launch_delay + "s;\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}
for(var i=0; i < num_flares; i++) {
csscode = ".launcher div:nth-child(" + num_flares + "n+" + i + ") {\n"
+ " -webkit-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ " -moz-transform: rotate(" + (i * 360/num_flares) + "deg);\n"
+ "}";
document.styleSheets[cssIdx].insertRule(csscode, 0);
}
for(var i=0; i < num_launchers; i++) {
var newdiv = document.createElement("div");
newdiv.className = "launcher";
for(var j=0; j < num_flares; j++) {
newdiv.appendChild(document.createElement("div"));
}
document.getElementById("stage").appendChild(newdiv);
}
}, false);
总结:以上就是本篇文的全部内容,大家可以自己动手试试,加深理解。希望能对大家的学习有所帮助,推荐视频学习:css3教程!
html中制作烟花的效果代码,css3+js实现烟花绽放的动画效果(代码示例)相关推荐
- css烟花绽放效果代码,css3+js实现烟花绽放的动画效果(代码示例)
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
- html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
这次我们来实现一个简单又很有意思的动画效果,完全由CSS 的animation来实现,素材和源码来自于其他网站,个人对源码做了一些改动优化 完成后的效果--旋转效果 (github pages打开特别 ...
- css3 烟 蚊香_css3+js实现烟花绽放的动画效果(代码示例)
本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看效 ...
- [译]CSS3实现柱状图的3D立体动画效果
翻译自<Animated 3D Bar Chart with CSS3> 首先,我们看一看要实现的效果: 这篇文章所实现的动画效果起源于一个小小的想法,这个想法来自于另一个网站的一篇文章, ...
- css3 呼吸的莲花_CSS3实现莲花绽放的动画效果
这篇文章我们来讲一下在网站建设中,CSS3实现莲花绽放的动画效果.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 先来看效果: 这效果看起来挺炫,但原理并不复杂,能实现一片花 ...
- 悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果 我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @ke ...
- 不到200行代码实现一个不断旋转的椭圆动画效果
源代码: <html><head><script src="jQuery/jscex.jscexRequire.min.js" type=" ...
- php加入js动态效果,js怎么给输入框增加动画效果
这次给大家带来js怎么给输入框增加动画效果,js给输入框增加动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. (function() { function p() { window.requ ...
最新文章
- 用质因子去分解质因数
- Deepin 解决google chrome卡顿的问题
- python【蓝桥杯vip练习题库】ADV-136大数加法(高精度加法)
- iphone开发之私有库private frameworks
- windows 读写锁 python_用Python实现读写锁
- 博科:物理与虚拟网络的统一管理
- 什么是工业DTU?工业DTU特点及应用领域分析
- 【beyong-sms】一款支持多家短信服务商优美的PHP短信发送库
- 在线制作生成装逼工具微信小程序源码
- 盘点一个Python面向对象的基础问题
- matlab中的~用法和~=
- 12道Java高级面试题:java时间差计算
- 车载以太网 > 百兆100BaseT1转TX盒子拆解(包含3类产品)
- 美国华盛顿州立大学计算机排名,华盛顿州立大学计算机科学computer science专业排名第251~300名(2020THE泰晤士高等教育世界大学排名)...
- html显示已知范围标量,【单选题】下列哪个HTML5元素用于显示已知范围内的标量测量...
- dpabi预处理报错——索引超出矩阵维度
- 【ZCMU1411】喜闻乐见的a+b(20进制a+b)
- 贾樟柯赵涛宣布结婚:8月已领证 威尼斯拍婚照
- matlab表示sa函数,SA:T1编写主函数法和T2Matlab自带的SA工具箱GUI法,两种方法实现对二元函数优化求解——Jason niu...
- [jQuery]选择框(select),多选取值(multiple)
热门文章
- java识别3D打印图_如何识别3D打印FDM机器结构i3、并联臂、UM、MB
- 直播系统编码器设置步骤
- vmware'如果已在 BIOS/固件设置中禁用 Intel VT-x,或主机自更改此设置后从未重新启动,则 Intel VT-x 可能被禁用'解决办法
- mybaits-plugs 多数据源 最简单的入门案例
- 占领手机,银行App的隐秘战事
- Java项目:药品进货销售管理系统(java+SSM+HTML+JS+JSP+mysql)
- C语言圆角矩形画法,UI们:圆角矩形环快速画法
- 网络编程—使用C语言实现发送TCP数据包,以命令行形式运行:SendTCP source_ip source_port dest_ip dest_port;(原理和常见错误分析)
- Anacand创建配置虚拟环境
- html+css创建炫酷表单