particles下雪粒子动画效果代码

代码语言:html

所属分类:粒子

代码描述:particles下雪粒子动画效果代码

代码标签: particles下雪 粒子 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style>
body{
    margin: 0;
    padding: 0;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(117, 114, 113, 0.8) 10%, rgba(40, 49, 77, 0.8) 30%, rgba(29, 35, 71, 0.8) 50%, rgba(19, 25, 28, 0.8) 80%, rgba(15, 14, 14, .8) 100%), url(//repo.bfw.wiki/bfwrepo/image/5fd8b1d9c228b.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}


    </style>

</head>

<body>
    <div id="particles-js"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/particles.2.0.0.js"></script>
    <script>
      

particlesJS("particles-js", {
    "particles": {
        "number": {
            "value": 400,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": "#ffffff"
        },
        "shape": {
            "type": "image",
            "stroke": {
                "width": 3,
                "color": "#fff"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "//repo.bfw.wiki/bfwrepo/icon/5df0375c14720.png",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.7,
            "random": false,
            "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
            }
        },
        "size": {
            "value": 5,
            "random": true,
            "anim&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0