写一个网页点击的特效

<!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>

代码解释:

HTML 结构:
- container div 作为点击区域的容器。
- 点击特效 click-effect div 将动态添加到容器中。
CSS 样式:
- container: 设置容器样式。 position: relative 允许子元素在其内部进行绝对定位。 overflow: hidden 防止特效超出容器边界。
- click-effect: 设置特效样式，初始状态缩放为 0 且透明。pointer-events: none 防止特效干扰点击事件。
- @keyframes clickAnimation: 定义动画效果，从缩放为 0 到缩放为 2，同时透明度逐渐降低。
JavaScript 逻辑:
- createClickEffect(event) 函数：
  - 获取点击事件 event。
  - 创建 click-effect 元素。
  - 使用 event.clientX 和 event.clientY 获取点击位置，并使用 container.offsetLeft 和 container.offsetTop 计算点击位置相对于容器的坐标。
  - 设置 click-effect 的位置。
  - 随机颜色: 生成随机十六进制颜色值，并应用到特效。
  - 将 click-effect 添加到容器中。
  - 监听 animationend 事件，在动画结束后移除 click-effect 元素，避免性能问题。

关键改进:

随机颜色: 每次点击都会产生不同的颜色，使特效更生动。
动画结束后移除元素: 避免大量特效元素堆积，提高性能。
点击位置更精确: 使用 offsetLeft 和 offsetTop 确保特效出现在点击的精确位置，即使容器有滚动或边距。
注释更清晰: 添加了更详细的注释，方便理解代码。

这个改进版本提供了更丰富的视觉效果和更好的性能。您可以根据自己的需求调整动画持续时间、缩放比例、颜色等参数。

posted @ 2024-12-08 09:47 王铁柱6 阅读(51) 评论(0) 收藏举报

刷新页面返回顶部

写一个网页点击的特效

公告