CodePen取得之滑鼠游標特效代碼修正（未完）

Sep 17, 2022

開始學程式後，因為常常遇到一些瓶頸，我開始養成逛技術部落格的習慣，有使用Hexo、Wordpress架設的，或使用網路上提供的Blog服務，如中國的極客園。
過程中除了佩服一些站長的堅持更新與提供專業知識外，有部分很吸晴的是，一些網站的滑鼠點擊會出現彩帶特效，或是網頁上的粒子動畫會隨著滑鼠移動改變動向，這些華麗的網站，常常都會讓我想把它們加入書籤，因為覺得真的是太有趣了。

所以也開始寫程式筆記部落格的我，希望門面好看點，找遍了代碼，我在CodePen上看到這個滑鼠特效挺簡約現代的，修改CSS中對於指定class的圓角設置，以及修改JavaScript中的顏色陣列配色後，原本想設置於本站首頁跟一些主要頁面中，然而我旋即發現下列兩個問題：

1.指標滑過太多次的區域，會被新生成的div占滿，最後變成無法點擊下方的超連結，這對網站功能與形象都是巨大的傷害。最後我是暫時修改CSS，將該class加上可穿透屬性，至少解決了基本功能不正常的問題。以下是修改後的CSS代碼：

.circle {
  position: fixed;
  margin-top: 40px;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  /* border-radius: 50%; */
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;

  /*以下加入這兩行是讓動畫從門型變成圓形的修改*/
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;

  /*下方這行讓套用該class的div具有穿透性，可以div點到下方的內容*/
  pointer-events: none;
}

2.從有安裝滑鼠指標的頁面點連結到其他沒安裝滑鼠指標的頁面時，class名為circle的div竟然還存在，導致頁面下方會產生巨大的空白區塊。目前暫時無法解決這個問題，所以暫時不幫網站安裝此段代碼，待我更了解DOM的生命週期，以及更加熟悉JavaScript後，再回來進行改寫。

/*修改了色彩常數為我要的幾個配色*/
const colors = ["#91bbff", "#9ccfff", "#ffbadb"];

let animateCircleFragment = document.createDocumentFragment();

function animateCircle(event) {
  let circleDivElem = document.createElement("div");
  circleDivElem.classList = "circle";

  animateCircleFragment.appendChild(circleDivElem);
  document.body.appendChild(animateCircleFragment);

  circleDivElem.style.left = event.clientX + "px";
  circleDivElem.style.top = event.clientY + "px";

  let color = colors[Math.floor(Math.random() * colors.length)];
  circleDivElem.style.borderColor = color;

  circleDivElem.style.transition = "all 0.5s linear 0s";

  circleDivElem.style.left = circleDivElem.offsetLeft - 20 + "px";
  circleDivElem.style.top = circleDivElem.offsetTop - 20 + "px";

  circleDivElem.style.width = "40px";
  circleDivElem.style.height = "40px";
  circleDivElem.style.borderWidth = "5px";
  circleDivElem.style.opacity = 0;

}
document.addEventListener("mousemove", animateCircle);