首頁 > web前端 > css教學 > 怎麼用canvas做出粒子噴泉動畫的效果

怎麼用canvas做出粒子噴泉動畫的效果

php中世界最好的语言
發布: 2017-11-24 14:10:06
原創
3232 人瀏覽過

這次帶給大家用canvas做出粒子噴泉動畫的效果,怎麼用canvas做出粒子噴泉動畫,canvas座粒子噴泉動畫需要注意哪些方面,接下來先做一個小案例

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>canvas粒子喷泉动画</title>
         <meta name="keywords" content=" canvas粒子喷泉动画" />
         <meta name="description" content=" canvas粒子喷泉动画" />
         <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>鼠标点击,增加粒子喷泉效果</div>
<canvas id="fireworks"></canvas>
<script src="js/index.js"></script>
</body>
</html>
Css部分:
body,
html,
canvas {
  margin: 0;
  padding: 0;
  background-color: #111;
  overflow: hidden;
}
 
canvas {
  background-color: transparent;
  position: relative;
  z-index: 2;
}
 
.text {
  position: absolute;
  left: 0;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 3.7vw;
  color: #fff;
  z-index: 1;
  opacity: 0.2;
}
登入後複製

以上就是用canvas做出粒子噴泉動畫的整個過程,有興趣的朋友可以自己動手操作一下,更多精彩請關注php中文網其它相關文章!

相關閱讀:

更多精彩請關注php中文網其它相關文章!

Css3動畫屬性怎麼使用

CSS3的text-shadow字體陰影怎麼使用

#

以上是怎麼用canvas做出粒子噴泉動畫的效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - canvas畫圖
來自於 1970-01-01 08:00:00
0
0
0
javascript - canvas 裁切空白區域
來自於 1970-01-01 08:00:00
0
0
0
html5 - canvas有時候會拿不到toDataURL數據
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板