⿏标点击反馈效果（基于css3动画）⽹上多是基于js-setTimeout及setInterval实现的动画效果，此篇基于css3-transition实现。
浮出符号效果：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body></body>
<script>
var clickCount = 0;
/**
* 根据⿏标点击坐标初始化dom，通过过渡属性实现动画效果
* dom渲染完成后设置⽬标偏移位置及⽬标透明度
* 过渡结束后移除dom
* @author:slzs
*/
var symbol = ateElement("b");
symbol.style.position = "absolute";
symbol.style.left = (e.pageX - 10) + "px";
p = (e.pageY - 15) + "px";
symbol.style.zIndex = 9999;
symbol.style.userSelect = "none"; // 禁⽌⽂本被选中，影响美观
symbol.style.fontSize = "18px";
lor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 随机颜⾊  ansition="all 1.5s";
symbol.addEventListener("transitionend",function(et){ // 动画结束移除dom
if(et.propertyName == "opacity" && et.srcElement.style.opacity==0)
ve();
});js控制css3动画触发
// 轮换⼏个预制字符
switch(++clickCount){
case 1:
symbol.innerText = "✔";
break;
case 2:
symbol.innerText = "❤";
break;
default:
symbol.innerText = "☺";
clickCount = 0;
}
document.body.appendChild(symbol);
requestAnimationFrame(()=>{
p = (e.pageY - 100) + "px";
symbol.style.opacity = 0;
});
};
</script>
</html>
⽔波纹效果：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
</head>
<body></body>
<script>
/**
* 根据⿏标点击坐标初始化dom，通过过渡属性实现动画效果
* dom渲染完成后设置⽬标偏移位置及⽬标透明度
* 过渡结束后移除dom
* @author:slzs
*/
var symbol = ateElement("div");
symbol.style.position = "absolute";
symbol.style.left = (e.pageX) + "px";
p = (e.pageY) + "px";
symbol.style.zIndex = 9999;
ansition="all 1.5s";
symbol.style.border="1px red solid";
symbol.style.borderColor = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 随机颜⾊  symbol.style.borderRadius="100%";
symbol.style.width = "0px";
symbol.style.height = "0px";
symbol.addEventListener("transitionend",function(et){ // 动画结束移除dom
if(et.propertyName == "opacity" && et.srcElement.style.opacity==0)
ve();
});
document.body.appendChild(symbol);
requestAnimationFrame(()=>{
symbol.style.width = "80px";
symbol.style.margin = "-7px -40px";
symbol.style.height = "14px";
symbol.style.opacity = 0;
});
};
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。