CSS3 粒子效果

最新推荐文章于 2024-05-29 10:05:45 发布

weixin_30270561

最新推荐文章于 2024-05-29 10:05:45 发布

阅读量419

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/youtianxia/p/3911869.html

版权

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

weixin_30270561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 粒子效果

css3粒子效果，粒子飘飞效果，觉得挺不错的效果。请注意，此为CSS3代码，IE浏览器看不到效果，请使用IE9或火狐浏览器，或Chrome浏览器。<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>接触角测定仪</t...
复制链接

扫一扫