vuepress-plugin-bubble
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    vuepress-plugin-bubble

    ::: tip

    这是vuepress的一个浪漫气泡特效插件

    :::

    • 使用效果

    image-20211122002556797

    安装

    npm i vuepress-plugin-bubble
    //docs/.vuepress/config.js
    
    const { path } = require("@vuepress/utils");
    
    module.exports = {
        //在这里配置插件
        plugins: [
            [
                'bubble',
                {
                    //气泡数量 推荐0(不包括)到1之前的小数,
                    bubbleNumber: 0.14,
    
                    //气泡透明度 0到1之间的小数
                    bubbleAlpha: 0.6,
    
                    //透明度变化速度,越接近于0越好
                    alphaChangeSpeed: 0.00001,
    
                    //气泡大小,推荐0到1之间的值
                    size: 0.4,
    
                    //气泡大小变化速度 越小越好
                    sizeChangeSpeed: 0.0002,
    
                    //气泡上升速度
                    riseSpeed: 0.4,
    
                    //气泡颜色,白色rgb(255,255,255) 请传入255,255,255
                    color: '255,255,255',
    
                    //该气泡盒子的z-index值,请根据你自己主题,传入适当的值,否则可能不会显示
                    zIndex: -2
                }
            ],
    }

    当你在config.js文件中,使用该插件后,该插件会自动在便会自动显示

    image-20211122003330518

    图中红框内的dom节点,便是该插件自动添加的,如果你确实配置了该插件,但是在首页中,并没有显示的话,那么请f12看一下你网站的css样式,并且传入正确,合适的zIndex

    ::: tip

    该插件所在节点的z-index是通过插件配置项中的zIndex进行配置的

    :::

    Install

    npm i vuepress-plugin-bubble

    DownloadsWeekly Downloads

    39

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    10 kB

    Total Files

    10

    Last publish

    Collaborators

    • qsyyke