html5 canvas全屏烟花动画特效

简介: 许多地方在春节、元宵等节日有放烟花的习俗,如果在网页上模拟烟花,以前也有一些javascript实现的效果,自从HTML5兴起之后,网页模拟烟花更加容易、逼真了。
许多地方在春节、元宵等节日有放烟花的习俗,如果在网页上模拟烟花,以前也有一些javascript实现的效果,自从HTML5兴起之后,网页模拟烟花更加容易、逼真了。

效果展示:
http://hovertree.com/texiao/html5/43/

效果图:


代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5 canvas全屏烟花动画特效 - 何问起</title><base target="_blank" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/html5/43/css/hovertree.css">
</head>
<body>
<div class="hovertree"></div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/html5/43/js/jquery.fireworks.js"></script>
<script type="text/javascript">
    $('.hovertree').fireworks({
	  sound: true, // sound effect
	  opacity: 0.9, 
	  width: '100%', 
	  height: '100%' 
	});
</script>
    <div style="width:340px;position:fixed;z-index:99;">来源:<a href="http://hovertree.com/">何问起</a> <a href="http://hovertree.com/h/bjag/me34x8fk.htm">说明</a></div>
</body>
</html>
HTML5不只在图像方面有许多进步,在声音方面也有进步,本烟花特效还可以设置是否有声音效果。sound: true 或者 sound: false 。

本特效源码下载:
http://hovertree.com/h/bjag/24o31rk5.htm

HTML5的相关题目
以下不是canvas的方法是:
A、getContext()
B、fill()
C、stroke()
D、controller()
答案: http://hovertree.com/tiku/bjaf/4tlxjl9k.htm

相关效果:
http://hovertree.com/h/bjaf/epbhdsa3.htm
目录
相关文章
|
19天前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
34 5
|
1月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
24 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
1月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
34 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
1月前
html实现的破碎拼接文字动画特效代码
html实现的破碎拼接文字动画特效代码是一段会自动产生文字依次破碎再拼接的效果,非常的炫。欢迎对此段代码感兴趣的朋友前来下载使用。
31 1
|
1月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
34 5
|
3月前
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
3月前
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
移动开发 HTML5
|
29天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
56 7