广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >如何使用css3+js实现烟花绽放的动画效果
  • 647

0
分享到

如何使用css3+js实现烟花绽放的动画效果

2024-04-02 19:04:59 647人浏览 八月长安
摘要

这篇文章主要为大家展示了“如何使用css3+js实现烟花绽放的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3+js实现烟花绽放的动画效果

这篇文章主要为大家展示了“如何使用css3+js实现烟花绽放的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3+js实现烟花绽放的动画效果”这篇文章吧。

　　每个烟花筒沿着场地底部的线分配一个随机的起始位置。它还在标记的区域内分配了一个随机目标。当烟花筒接近其目标点时，它会缩小为不可见（0x0像素）。

　　此时，耀斑变得可见。这些实际上是一系列以径向方式向外指向的DIV，在向外的尖端有一种颜色-就像火柴棍一样。为了模拟爆炸，他们只是增加了长度，使灯光向外移动。

　　javascript用于：

　　1、将所有必需的元素添加到页面（DOM）;

　　2、为每个烟花筒创建和分配关键帧;和

　　3、指定颜色并将每个光斑旋转到正确的位置。

　　代码示例：

　　html代码：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<title>烟花绽放</title>

　　<linkrel="stylesheet"type="text/css"href="css-fireworks.css">

　　</head>

　　<body>

　　<divid="stage"><!--动画效果发生在这里--></div>

　　<scripttype="text/javascript"src="css-fireworks.js"></script>

　　</body>

　　</html>

　　css代码（css-fireworks.css）

　　@-WEBkit-keyframesexplosion{

　　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-keyframesexplosion{

　　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:100pxauto;

　　background:#000url(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:3pxsolidyellow;

　　}

　　.launcherdiv{

　　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:4pxsolidyellow;

　　border-radius:2px;

　　-webkit-transfORM-origin:00;

　　-moz-transform-origin:00;

　　}

　　js代码（css-fireworks.js）

　　document.addEventListener("DOMContentLoaded",function(){

　　varnum_launchers=12;

　　varnum_flares=20;

　　varflare_colours=['red','aqua','violet','yellow','lightgreen','white','blue'];

　　varcssIdx=document.styleSheets.length-1;

　　functionmyRandom(from,to)

　　{

　　returnfrom+Math.floor(Math.random()*(to-from));

　　}

　　varkeyframes_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(vari=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{//WebKitbrowsers

　　csscode2="@-webkit-keyframesflight_"+i+"{\n"+csscode+"\n}";

　　document.styleSheets[cssIdx].insertRule(csscode2,0);

　　}catch(e){}

　　try{//Mozillabrowsers

　　csscode2="@-moz-keyframesflight_"+i+"{\n"+csscode+"\n}";

　　document.styleSheets[cssIdx].insertRule(csscode2,0);

　　}catch(e){}

　　}

　　for(vari=0;i<num_launchers;i++){

　　varrand=myRandom(0,flare_colours.length-1);

　　varrand_colour=flare_colours[rand];

　　varlaunch_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(vari=0;i<num_flares;i++){

　　csscode=".launcherdiv: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(vari=0;i<num_launchers;i++){

　　varnewdiv=document.createElement("div");

　　newdiv.className="launcher";

　　for(varj=0;j<num_flares;j++){

　　newdiv.appendChild(document.createElement("div"));

　　}

　　document.getElementById("stage").appendChild(newdiv);

　　}

　　},false);


以上是“如何使用css3+js实现烟花绽放的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何使用css3+js实现烟花绽放的动画效果

本文链接: https://www.lsjlt.com/news/89582.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何使用css3+js实现烟花绽放的动画效果
    这篇文章主要为大家展示了“如何使用css3+js实现烟花绽放的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css3+js实现烟花绽放的动画效果...
    99+
    2022-10-19
  • CSS3如何实现莲花绽放的动画效果
    这篇文章给大家分享的是有关CSS3如何实现莲花绽放的动画效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。先来看效果：这效果看起来挺炫，但原理并不复杂，能实现一片花瓣动起来，就能实现9片花瓣。效果的叠加而已。HT...
    99+
    2023-06-08
  • 怎么用HTML5 Canvas实现烟花绽放动画效果
    这篇文章主要介绍“怎么用HTML5 Canvas实现烟花绽放动画效果”，在日常操作中，相信很多人在怎么用HTML5 Canvas实现烟花绽放动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方...
    99+
    2022-10-19
  • 如何使用纯CSS做一个烟花绽放动画
    这篇文章给大家分享的是有关如何使用纯CSS做一个烟花绽放动画的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。最近项目上需要做一个烟花动画，要求是随机大小，不同地方出现，先看效果一、...
    99+
    2022-10-19
  • css3如何实现旋转缩放动画效果
    这篇文章主要介绍了css3如何实现旋转缩放动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 方法：1、利用...
    99+
    2022-10-19
  • css3如何实现放大旋转动画效果
    这篇文章主要介绍“css3如何实现放大旋转动画效果”，在日常操作中，相信很多人在css3如何实现放大旋转动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3如何实现...
    99+
    2022-10-19
  • 如何使用CSS3实现动画效果
    这篇文章主要为大家展示了“如何使用CSS3实现动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用CSS3实现动画效果”这篇文章吧。浏览器支持Inte...
    99+
    2022-10-19
  • 如何使用CSS3实现超炫的Loading动画效果
    今天小编给大家分享一下如何使用CSS3实现超炫的Loading动画效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，...
    99+
    2022-10-19
  • CSS3如何实现绚丽的动画效果
    这篇文章主要讲解了“CSS3如何实现绚丽的动画效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3如何实现绚丽的动画效果”吧！ 举例： 1...
    99+
    2022-10-19
  • Css3中如何实现hover动画的颜色动画效果
    这篇文章主要为大家展示了“Css3中如何实现hover动画的颜色动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css3中如何实现hover动画的颜色动画...
    99+
    2022-10-19
  • JavaScript动画原理之如何使用js进行动画效果的实现
    目录前言1.动画原理2.动画函数的封装3.给不同元素添加定时器4.缓动动画原理5.给动画添加回调函数6.动画函数的使用写在最后前言 动画对于我们来说都不陌生，css里面就有很多动画，...
    99+
    2023-05-14
    js动画效果有哪些 js动画效果代码案例 javascript动画教程
  • 如何使用CSS3实现SVG路径描边动画效果
    这篇文章将为大家详细讲解有关如何使用CSS3实现SVG路径描边动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。不依赖javascript，直接使用纯css实现 svg 的描边绘制动画效果，效果演示动...
    99+
    2023-06-08
  • 如何使用css3实现转换过渡和动画效果
    这篇文章主要介绍了如何使用css3实现转换过渡和动画效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。为什么要用css动画替换js动画  导致JavaScript效...
    99+
    2023-06-08
  • css3如何实现改变宽度的动画效果
    小编给大家分享一下css3如何实现改变宽度的动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...
    99+
    2022-10-19
  • 用CSS3+HTML5+JS 怎么实现块的收缩与展开的动画效果
    ...
    99+
    2023-06-08
  • 如何利用JS实现时间轴动画效果
    目录css动画什么是时间轴动画？动画对象动画函数思考总结css动画 在前端开发中，一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ，如： .div1 { ...
    99+
    2022-11-13
  • 如何利用SVG和CSS3实现边框动画效果
    本篇内容主要讲解“如何利用SVG和CSS3实现边框动画效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何利用SVG和CSS3实现边框动画效果”吧!今天我们来...
    99+
    2022-10-19
  • 如何运用CSS3动画实现高亮光弧效果
    小编给大家分享一下如何运用CSS3动画实现高亮光弧效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！代码如下：<!Doct...
    99+
    2022-10-19
  • CSS动画：如何实现元素的抖动缩放效果
    CSS动画：如何实现元素的抖动缩放效果在网页设计中，元素的动画效果能够增加用户的视觉体验，为平淡的页面增添活力。而CSS动画正是实现这些效果的强大工具之一。本文将详细介绍如何使用CSS动画实现元素的抖动缩放效果，并提供具体的代码示例供读者参...
    99+
    2023-11-21
    动画 CSS 缩放
  • 如何用CSS3实现对图片的放大效果
    这篇文章主要讲解了“如何用CSS3实现对图片的放大效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何用CSS3实现对图片的放大效果”吧！ ...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作