zoukankan      html  css  js  c++  java
  • 博客园之鼠标粒子吸附特效

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

       鼠标粒子吸附特效如图:

            

     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与之类似。

                 

  • 相关阅读:
    Lodash JS实用类库 数组操作 延时执行 功能强大
    7.【nuxt起步】-Nuxt与后端数据交互
    vue图片懒加载
    猎鹰与龙飞船基于 Linux,采用 C++、Chromium 与 JS 开发
    | 和 ||,& 和 && 的区别
    Linux安装.net core
    Linux下程序后台运行:nohup和&
    vuejs如何调试代码
    全局安装 Vue cli3 和 继续使用 Vue-cli2.x
    导入sass文件
  • 原文地址:https://www.cnblogs.com/yqw0710/p/12490935.html
Copyright © 2011-2022 走看看