生活随笔
收集整理的這篇文章主要介紹了
CSS3 粒子效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- css3粒子效果，粒子飄飛效果，覺得挺不錯的效果。請注意，此為CSS3代碼，IE瀏覽器看不到效果，請使用IE9或火狐瀏覽器，或Chrome瀏覽器。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>接觸角測定儀</title>
</head>
<body>
<style type="text/css">
#topcanvas{position:absolute;background:#fff;z-index:-7;width:300px;height:300px;}
</style>
<script type="text/javascript">function $(id){return typeof id === "string" ? document.getElementById(id) : id;}(function (window, undefined) {if (window.ZHJ) {return;}// }var ZHJ = window.ZHJ = {};//粒子效果
ZHJ.drawPartical = {drawFunction : function(ctx,r){//構造粒子模板－－公用函數
ctx.save();ctx.beginPath();ctx.moveTo(r,0);for(var i=0;i<10;i++){ctx.rotate(Math.PI/Math.random()*20);
ctx.lineTo(r,0);}ctx.closePath();ctx.fill();ctx.restore();},drawImplement : function(){//粒子效果－－產生粒子，定制密度，顏色
setInterval(function(){var topcCanvas = $('topcanvas');var ctx = topcCanvas.getContext('2d');ctx.fillStyle = '#fff';//畫布顏色
ctx.fillRect(0,0,300,150);//填充區域的大小為200*150
ctx.save();ctx.beginPath();for(var j=1;j<100;j++){//生成粒子密度
ctx.save();ctx.fillStyle = '#ccc';//粒子顏色
ctx.translate(300-Math.floor(Math.random()*300),75-Math.floor(Math.random()*150));ZHJ.drawPartical.drawFunction(ctx,Math.floor(Math.random()*4));//粒子生成
ctx.restore();}ctx.restore();},100);}};ZHJ.drawPartical.drawImplement();//粒子－－頁面執行處
})(window);</script><canvas id="topcanvas"></canvas>
</body>
</html> ?
轉載于:https://www.cnblogs.com/youtianxia/p/3911869.html
總結
以上是生活随笔為你收集整理的CSS3 粒子效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
