鼠标点击反馈效果(基于css3动画)_点击鼠标获得反馈的页面

作者：你好赵伟 | 2024-02-16 22:31:51

踩

点击鼠标获得反馈的页面

网上多是基于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;
    document.onclick = function(e) {
 
		/**
		 * 根据鼠标点击坐标初始化dom，通过过渡属性实现动画效果
		 * dom渲染完成后设置目标偏移位置及目标透明度
		 * 过渡结束后移除dom
		 * @author:slzs
		 */
        var symbol = document.createElement("b");
 
        symbol.style.position = "absolute";
		symbol.style.left = (e.pageX - 10) + "px";
        symbol.style.top = (e.pageY - 15) + "px";
        symbol.style.zIndex = 9999;
        symbol.style.userSelect = "none"; // 禁止文本被选中，影响美观
        symbol.style.fontSize = "18px"; 
        symbol.style.color = `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`; // 随机颜色
		symbol.style.transition="all 1.5s";
		symbol.addEventListener("transitionend",function(et){ // 动画结束移除dom
			if(et.propertyName == "opacity" && et.srcElement.style.opacity==0)
				et.srcElement.remove();
		});
 
		// 轮换几个预制字符
		switch(++clickCount){
			case 1:
		        symbol.innerText = "✔";
				break;
			case 2:
		        symbol.innerText = "❤";
				break;
			default:
		        symbol.innerText = "☺";
				clickCount = 0;
		}
        document.body.appendChild(symbol);
 
        requestAnimationFrame(()=>{
	        symbol.style.top = (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>
    document.onclick = function(e) {
 
		/**
		 * 根据鼠标点击坐标初始化dom，通过过渡属性实现动画效果
		 * dom渲染完成后设置目标偏移位置及目标透明度
		 * 过渡结束后移除dom
		 * @author:slzs
		 */
        var symbol = document.createElement("div");
 
        symbol.style.position = "absolute";
		symbol.style.left = (e.pageX) + "px";
        symbol.style.top = (e.pageY) + "px";
        symbol.style.zIndex = 9999;
		symbol.style.transition="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)
 				et.srcElement.remove();
 		});
 
        document.body.appendChild(symbol);
 
        requestAnimationFrame(()=>{
	        symbol.style.width = "80px";
            symbol.style.margin = "-7px -40px";
	        symbol.style.height = "14px";
            symbol.style.opacity = 0;
        });
    };
</script>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/97313

蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】

蓝桥杯Web应用开发【国赛班】-CSS3新特性【练习一：属性有效性验证】蓝桥杯Web应用开发-CSS3新特性【练习一：属性有效性验证】练习一：属性有效性验证页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入... [详细]

踩