美文网首页web开发
vue 粒子效果

vue 粒子效果

作者: 1994陈 | 来源:发表于2020-07-22 13:41 被阅读0次

    1.安装插件

    npm install vue-particles -s
    

    2.在main.js中引用

    import '@libs/plugins/vueParticles.js';
    

    3.在页面中使用

    <vue-particles
                color="#a1e2eb"
                :particleOpacity="0.7"
                :particlesNumber="70"
                shapeType="circle"
                :particleSize="4"
                linesColor="#fff"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="2"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="false"
                clickMode="push"
                class="liziBackground"
            >
            </vue-particles>
    

    4.css中设置样式

    .liziBackground{
            position: fixed;
            width: 100%;
            height: 100%;
        }
    

    相关文章

      网友评论

        本文标题:vue 粒子效果

        本文链接:https://www.haomeiwen.com/subject/tewzkktx.html