鼠标点击反馈效果(基于css3动画)

最新推荐文章于 2024-05-09 13:39:43 发布

slzs_zyt

最新推荐文章于 2024-05-09 13:39:43 发布

阅读量6.1k

点赞数 6

分类专栏：前端笔记

本文链接：https://blog.csdn.net/slzs_zyt/article/details/82688349

版权

前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

网上多是基于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>

slzs_zyt

关注

6
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
鼠标点击反馈效果(基于css3动画)

网上多是基于js-setTimeout及setInterval实现的动画效果，此篇基于css3-transition实现。浮出符号效果：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv=Content-Type content="text/html;charset=utf-8"&gt;&lt;/h...
复制链接

扫一扫