html5canvas全屏煙花動畫特效
許多地方在春節、元宵等節日有放煙花的習俗,如果在網頁上模擬煙花,以前也有一些javascript實現的效果,自從HTML5興起之後,網頁模擬煙花更加容易、逼真了。
效果展示:
http://hovertree.com/texiao/html5/43/
效果圖:
程式碼如下:
效果展示:
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
相關文章
- HTML5+Canvas漂亮的3D煙花動畫生日特效,節日特效,煙花HTMLCanvas3D動畫特效
- HTML5 Canvas 超逼真煙花綻放動畫HTMLCanvas動畫
- Android在canvas中實現高效能的煙花/粒子特效AndroidCanvas特效
- 用canvas 畫煙花Canvas
- 春節將至,喜慶的煙花安排上(js實現煙花)JS
- Canvas 放煙花合集 -- 用粉絲頭像做成煙花綻放?Canvas
- html5煙花效果HTML
- 實現一個煙花效果
- 過年有燃放煙花爆竹禁令那我們用css寫一個仙女棒煙花看看吧CSS
- iOS 動畫特效(swift)iOS動畫特效Swift
- js煙花效果程式碼例項JS
- Android超炫酷煙花程式Android
- 【帶著canvas去流浪(10)】文字煙花Canvas
- canvas系列三之《煙花》效果實現Canvas
- canvas動畫特效 之 星空Canvas動畫特效
- threejs+vue3實現煙花效果JSVue
- JQuery3:動畫和特效jQuery動畫特效
- 【CSS】圖片動畫特效(相框)CSS動畫特效
- 從未設計過現實裡的煙花秀,他卻是一位資深“煙花模擬器”開發者
- canvas實現煙花燃放效果程式碼例項Canvas
- 前端動畫專題(一):字型特效前端動畫特效
- mac動畫特效製作軟體Mac動畫特效
- 高仿微信搶紅包動畫特效動畫特效
- PS一鍵煙霧特效,畫面瞬間高階了!特效
- web前端動畫專題(1):字型特效Web前端動畫特效
- 1.20 JQuery3:動畫和特效jQuery動畫特效
- CSS3 單選框動畫特效CSSS3動畫特效
- 移動端動畫特效開啟加速動畫特效
- 還在用canvas畫格子嗎?文字煙花效果更不錯噢Canvas
- 棒呆!如何用css3實現煙花綻放效果CSSS3
- 前端動畫專題(二):輸入框特效前端動畫特效
- 動畫特效製作軟體:Express Animate mac動畫特效ExpressMac
- 在哪些國家,煙花是除夕夜必不可少的?
- jQuery炫酷全屏3D焦點圖動畫jQuery3D動畫
- web前端動畫專題(2):輸入框特效Web前端動畫特效
- 基於 Canvas 的 HTML5 文字動畫特效CanvasHTML動畫特效
- 使用CADisplayLink實現UILabel動畫特效UI動畫特效
- iOS實現超酷頁面切換動畫特效iOS動畫特效