• 博客园之鼠标粒子吸附特效


       之前看见有人博客中带有鼠标粒子吸附特效,觉得很漂亮。找了很多教程,但总是不完善,自己总结了一下,记录下来。

       鼠标粒子吸附特效如图:

            

     1.申请JS权限

          点击博客园-->管理-->设置-->下拉找到:博客侧边栏公告(支持HTML代码)(申请JS权限)-->点击‘JS申请权限'-->写入申请理由。

          权限申请通过一般需要一两个小时,耐心等待即可。申请成功后,如图显示:

             

          很多教程中,只是提供了粒子吸附代码,没有说明需要申请JS权限或者只是一带而过。所以我之前特效出不来,一直以为是代码的问题,弄了好久。

    2.添加特效代码

          点击博客园-->管理-->设置-->下拉找到'页脚Html代码'-->添加如下代码--> 保存(保存按钮在页面左下角):

    /*粒子线条,鼠标移动会以鼠标为中心吸附的特效*/
    <script id="c_n_script" src="https://blog-static.cnblogs.com/files/hxun/canvas-nest.js" color="255,0,255" opacity="1" count="100" zindex="-2">
      if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
          //这里可以写移动端展示效果代码,本人没试过
      }
    </script>
    

      

    配置详解:

    • color: 线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
    • pointColor: 交点颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
    • opacity: 线条透明度(0~1), 默认: 0.5
    • count: 线条的总数量, 默认: 150
    • zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
    • https://blog-static.cnblogs.com/files/hxun/canvas-nest.js 这是添加的文件的链接

          注:对于color,可以在百度上搜索:RGB,里面会提供RGB颜色对照表,选择自己喜欢的,将代码中的数值替换掉即可。pointcolor与之类似。

                 

  • 相关阅读:
    5
    4
    3
    work02
    查看远程库信息(git remote的用法)
    隐藏的文件
    tag相关操作
    分支管理
    git 克隆分支
    git初始化操作
  • 原文地址:https://www.cnblogs.com/yqw0710/p/12490935.html
Copyright © 2020-2023  润新知