第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何將來(lái)自particle.js 的粒子放置在我的內(nèi)容后面?

如何將來(lái)自particle.js 的粒子放置在我的內(nèi)容后面?

慕森卡 2022-06-09 19:43:26
我正在嘗試將來(lái)自particle.js 的粒子動(dòng)畫放在我的div 后面。我嘗試將所有內(nèi)容放在#particles-js div 中,并更改內(nèi)容和#particles-js 的z-index。這是 HTML 的外觀:<div id="particles-js">        <header>            <h1>Vibe!</h1>            <h2>Outwit your friends</h2>        </header>        <div class="main">            <div class="container">                <p>What should we call you?</p>                <input class="input input-lg"type="text">                <button class="btn btn-lg">Join</button>                <button class="btn btn-lg">Create</button>            </div>        </div>    </div> 我的 CSS 也有很多position: absolute標(biāo)簽,這可能是原因嗎?JSFiddle:https ://jsfiddle.net/j305exgy/
查看完整描述

2 回答

?
慕哥9229398

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超6個(gè)贊

您缺少粒子 json 文件。


JS:


particlesJS("particles-js", {

  "particles": {

    "number": {

      "value": 380,

      "density": {

        "enable": true,

        "value_area": 800

      }

    },

    "color": {

      "value": "#ffffff"

    },

    "shape": {

      "type": "circle",

      "stroke": {

        "width": 0,

        "color": "#000000"

      },

      "polygon": {

        "nb_sides": 5

      },

      "image": {

        "src": "img/github.svg",

        "width": 100,

        "height": 100

      }

    },

    "opacity": {

      "value": 0.5,

      "random": false,

      "anim": {

        "enable": false,

        "speed": 1,

        "opacity_min": 0.1,

        "sync": false

      }

    },

    "size": {

      "value": 3,

      "random": true,

      "anim": {

        "enable": false,

        "speed": 40,

        "size_min": 0.1,

        "sync": false

      }

    },

    "line_linked": {

      "enable": true,

      "distance": 150,

      "color": "#ffffff",

      "opacity": 0.4,

      "width": 1

    },

    "move": {

      "enable": true,

      "speed": 6,

      "direction": "none",

      "random": false,

      "straight": false,

      "out_mode": "out",

      "bounce": false,

      "attract": {

        "enable": false,

        "rotateX": 600,

        "rotateY": 1200

      }

    }

  },

  "interactivity": {

    "detect_on": "canvas",

    "events": {

      "onhover": {

        "enable": true,

        "mode": "grab"

      },

      "onclick": {

        "enable": true,

        "mode": "push"

      },

      "resize": true

    },

    "modes": {

      "grab": {

        "distance": 140,

        "line_linked": {

          "opacity": 1

        }

      },

      "bubble": {

        "distance": 400,

        "size": 40,

        "duration": 2,

        "opacity": 8,

        "speed": 3

      },

      "repulse": {

        "distance": 200,

        "duration": 0.4

      },

      "push": {

        "particles_nb": 4

      },

      "remove": {

        "particles_nb": 2

      }

    }

  },

  "retina_detect": true

});

CSS


#particles-js {

  position: fixed;

  width: 100%;

  height: 100%;

  background-color: #ccc;

  background-size: cover;

  background-position: 50% 50%;

}

HTML:


<div id="particles-js"></div>

工作示例:jsfiddle.net/7aLnpkoh


查看完整回答
反對(duì) 回復(fù) 2022-06-09
?
婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

您缺少 z-index: -1;


#particles-js {

     position: absolute;

     left: 0px;

     top: 0px;

     z-index: -1;

    }


查看完整回答
反對(duì) 回復(fù) 2022-06-09
  • 2 回答
  • 0 關(guān)注
  • 118 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)