鼠标魔改、动态背景

好消息！

• 这次是动态背景加了特效在里面
  
  1.详见官方文档 点击跳转
• 鼠标我是跟着Fomalhaut🥝魔改了一下，颜色也可以自己设置的(不过我懒，颜色是跟那个大佬一模一样的)，这里可以给需要魔改的朋友们写一个步骤,也可以直接跳转Fomalhaut🥝的步骤
  
  1.在自己的根目录上找到source这个文件夹，然后在source里找到js文件夹,最后在js文件夹里创建cursor.js的文件,–>[hexo]\source\js\cursor.js这是整个路径,在cursor.js里如下代码

  var CURSOR;
  
  Math.lerp = (a, b, n) => (1 - n) * a + n * b;
  
  const getStyle = (el, attr) => {
      try {
          return window.getComputedStyle
              ? window.getComputedStyle(el)[attr]
              : el.currentStyle[attr];
      } catch (e) {}
      return "";
  };
  
  class Cursor {
      constructor() {
          this.pos = {curr: null, prev: null};
          this.pt = [];
          this.create();
          this.init();
          this.render();
      }
  
      move(left, top) {
          this.cursor.style["left"] = `${left}px`;
          this.cursor.style["top"] = `${top}px`;
      }
  
      create() {
          if (!this.cursor) {
              this.cursor = document.createElement("div");
              this.cursor.id = "cursor";
              this.cursor.classList.add("hidden");
              document.body.append(this.cursor);
          }
  
          var el = document.getElementsByTagName('*');
          for (let i = 0; i < el.length; i++)
              if (getStyle(el[i], "cursor") == "pointer")
                  this.pt.push(el[i].outerHTML);
  
          document.body.appendChild((this.scr = document.createElement("style")));
          // 这里改变鼠标指针的颜色 由svg生成
          this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='rgb(57, 197, 187)'/></svg>") 4 4, auto}`
      }
  
      refresh() {
          this.scr.remove();
          this.cursor.classList.remove("hover");
          this.cursor.classList.remove("active");
          this.pos = {curr: null, prev: null};
          this.pt = [];
  
          this.create();
          this.init();
          this.render();
      }
  
      init() {
          document.onmouseover  = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.add("hover");
          document.onmouseout   = e => this.pt.includes(e.target.outerHTML) && this.cursor.classList.remove("hover");
          document.onmousemove  = e => {(this.pos.curr == null) && this.move(e.clientX - 8, e.clientY - 8); this.pos.curr = {x: e.clientX - 8, y: e.clientY - 8}; this.cursor.classList.remove("hidden");};
          document.onmouseenter = e => this.cursor.classList.remove("hidden");
          document.onmouseleave = e => this.cursor.classList.add("hidden");
          document.onmousedown  = e => this.cursor.classList.add("active");
          document.onmouseup    = e => this.cursor.classList.remove("active");
      }
  
      render() {
          if (this.pos.prev) {
              this.pos.prev.x = Math.lerp(this.pos.prev.x, this.pos.curr.x, 0.15);
              this.pos.prev.y = Math.lerp(this.pos.prev.y, this.pos.curr.y, 0.15);
              this.move(this.pos.prev.x, this.pos.prev.y);
          } else {
              this.pos.prev = this.pos.curr;
          }
          requestAnimationFrame(() => this.render());
      }
  }
  
  (() => {
      CURSOR = new Cursor();
      // 需要重新获取列表时，使用 CURSOR.refresh()
  })();

  其中：

  this.scr.innerHTML = `* {cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' width='8px' height='8px'><circle cx='4' cy='4' r='4' opacity='1.0' fill='rgb(57, 197, 187)'/></svg>") 4 4, auto}`

  这一行是用来改颜色的，在fill这里，颜色随你自己喜好，也可以用Fomalhaut🥝的。
  
  2.在Hexo\source\css\custom.css里也添加如下代码:

  /* 鼠标样式 */
  #cursor {
    position: fixed;
    width: 16px;
    height: 16px;
    /* 这里改变跟随的底色 */
    background: var(--theme-color);
    border-radius: 8px;
    opacity: 0.25;
    z-index: 10086;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform;
  }
  
  #cursor.hidden {
    opacity: 0;
  }
  
  #cursor.hover {
    opacity: 0.1;
    transform: scale(2.5);
    -webkit-transform: scale(2.5);
    -moz-transform: scale(2.5);
    -ms-transform: scale(2.5);
    -o-transform: scale(2.5);
  }
  
  #cursor.active {
    opacity: 0.5;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
  }

  鼠标阴影的颜色，可以随自己来改变。

  background: var(--theme-color);  /*我的和Fomalhaut🥝一样都是 rgb(57,197,187)*/

  3.在_config.butterfly.yml里找到Inject的配置，并在head处和bottom处添加如下：(这里直接用了Fomalhaut🥝的代码框)

  inject:
    head:
  +    - <link rel="stylesheet" href="/css/custom.css"> 
    bottom:
  +    - <script defer src="/js/cursor.js"></script>

  4.最后就是一键三连了

  hexo cl;hexo g;hexo d

  在部署的网站查看最终效果。

But 坏消息!

• 今天一下午都在搞那个评论系统，注册了各种数据库，好麻烦一做就做到了天黑了
• 我什么时候才能进阶成为大佬