<!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 结构:
containerdiv 作为点击区域的容器。- 点击特效
click-effectdiv 将动态添加到容器中。
-
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确保特效出现在点击的精确位置，即使容器有滚动或边距。 - 注释更清晰: 添加了更详细的注释，方便理解代码。
这个改进版本提供了更丰富的视觉效果和更好的性能。您可以根据自己的需求调整动画持续时间、缩放比例、颜色等参数。
标签：特效,container,clickEffect,effect,点击,网页,click From： https://www.cnblogs.com/ai888/p/18593088