寫一個網頁點選的特效

王铁柱6發表於2024-12-08
網頁特效
<!DOCTYPE html>
<html>
<head>
<title>點選特效</title>
<style>
body {
  background-color: #f0f0f0;
}

.container {
  width: 500px;
  height: 300px;
  margin: 50px auto;
  background-color: #fff;
  position: relative; /* 為了讓特效在容器內絕對定位 */
  overflow: hidden; /* 防止特效超出容器 */
}

.click-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0); /* 初始狀態縮放為0 */
  opacity: 0; /* 初始狀態透明 */
  pointer-events: none; /* 防止特效干擾點選 */
  animation: clickAnimation 0.5s forwards; /* 應用動畫 */
}

@keyframes clickAnimation {
  0% {
    transform: scale(0);
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

</style>
</head>
<body>

<div class="container" onclick="createClickEffect(event)">
  點選這裡
</div>

<script>
function createClickEffect(event) {
  const container = document.querySelector('.container');
  const clickEffect = document.createElement('div');
  clickEffect.classList.add('click-effect');

  // 獲取點選位置相對於容器的座標
  const x = event.clientX - container.offsetLeft;
  const y = event.clientY - container.offsetTop;

  clickEffect.style.left = x + 'px';
  clickEffect.style.top = y + 'px';


  // 隨機顏色
  const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  clickEffect.style.backgroundColor = randomColor;



  container.appendChild(clickEffect);

  // 動畫結束後移除元素，避免效能問題
  clickEffect.addEventListener('animationend', () => {
    clickEffect.remove();
  });
}
</script>

</body>
</html>

程式碼解釋:

  1. HTML 結構:

    • container div 作為點選區域的容器。
    • 點選特效 click-effect div 將動態新增到容器中。

  2. CSS 樣式:

    • container: 設定容器樣式。 position: relative 允許子元素在其內部進行絕對定位。 overflow: hidden 防止特效超出容器邊界。
    • click-effect: 設定特效樣式，初始狀態縮放為 0 且透明。pointer-events: none 防止特效干擾點選事件。
    • @keyframes clickAnimation: 定義動畫效果，從縮放為 0 到縮放為 2，同時透明度逐漸降低。

  3. JavaScript 邏輯:

    • createClickEffect(event) 函式：
      • 獲取點選事件 event。
      • 建立 click-effect 元素。
      • 使用 event.clientX 和 event.clientY 獲取點選位置，並使用 container.offsetLeft 和 container.offsetTop 計算點選位置相對於容器的座標。
      • 設定 click-effect 的位置。
      • 隨機顏色: 生成隨機十六進位制顏色值，並應用到特效。
      • 將 click-effect 新增到容器中。
      • 監聽 animationend 事件，在動畫結束後移除 click-effect 元素，避免效能問題。

關鍵改進:

  • 隨機顏色: 每次點選都會產生不同的顏色，使特效更生動。
  • 動畫結束後移除元素: 避免大量特效元素堆積，提高效能。
  • 點選位置更精確: 使用 offsetLeft 和 offsetTop 確保特效出現在點選的精確位置，即使容器有滾動或邊距。
  • 註釋更清晰: 新增了更詳細的註釋，方便理解程式碼。

這個改進版本提供了更豐富的視覺效果和更好的效能。您可以根據自己的需求調整動畫持續時間、縮放比例、顏色等引數。

相關文章