前端开发实现点击出现不断向上可变色心形的效果_js 每秒变色心型雨

如何实现前端开发效果，点击屏幕时展现心形，自动向上移动，并随着向上移动而逐渐透明直到消失

我先给大家说一下这个效果的实现原理，大家明白了原理，代码怎么写都行，就是那些东西而已

首先，它的原理就是页面上有一个div盒子，这个盒子处于隐藏状态，这个盒子里面有放了一个图片，这个图片如果没有特别要求，大家也不用去自己ps，我们直接导入一个公共的矢量切片服务器上的资源就可以，这里说的矢量切片大家不理解也没有关系，就理解为一个专门存放图片的服务器就可以

其次这个盒子对应的效果我们在css准备好，之后用js给整个页面添加一个点击事件，点击任意一个地方的时候，触发事件，复制这个盒子，并让他展示出来，随后按照我们想要的效果控制这个盒子的展示效果，整个实现流程中用到的js也直接导入公共的就可以，当然你自己下载一个js包也可以

现在开始上代码

首先是盒子部分

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/common_star.css" />
<div id="div_dom">
	<svg t="1611984899556" class="icon" viewBox="0 0 1169 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1962" width="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink">
		<path d="M1045.333 117.333C919.467-6.4 716.8-10.667 584.533 106.667 452.267-10.667 249.6-6.4 123.733 117.333c-128 128-130.133 337.067-2.133 467.2l4.267 4.267 384 384c40.533 40.533 106.666 42.667 149.333 2.133l2.133-2.133 384-384c128-128 130.134-337.067 4.267-465.067-2.133-4.266-2.133-4.266-4.267-6.4z" p-id="1963" />
	</svg>
</div>
<script src="../js/common_star.js"></script>
1
2
3
4
5
6
7
8

其次是css部分

.icon{
	fill:currentColor;/* 让svg的颜色随着所在盒子而变化 */
}

#div_dom{
	display: none;/* 隐藏要拷贝的盒子 */
}

div{
	position: absolute;/* 必须加定位,div才可以不影响整个文档流的前提下变换位置 */
}

.opacity1 {
	opacity: 0.6;/* 透明度0.6 */
}

.opacity2 {
	opacity: 0.3;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

最后是js部分

window.onclick = function(e) {
	//存储需要的颜色
	var arr = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#9AECDB", "#f1c40f", "#e67e22", "#e74c3c", "#9980FA","#c0392b", "#d35400", "#f39c12"];
	//随机产生一个颜色
	var heartNum = Math.floor(Math.random() * arr.length);
	
	var domss=document.getElementById("div_dom"); // 获得要克隆的节点对象 
	var div=domss.cloneNode(true);//克隆
	
	div.style.color=arr[heartNum];
	
	div.setAttribute("id", "");//取消id值，变为可见
	div.setAttribute("class", "opacity0");
	
	//获得鼠标的x,y轴的位置，整合成盒子初始的位置，使爱心的中心点和鼠标头重合，加强视觉效果
	var x = e.pageX - 15;
	var y = e.pageY - 15;
	div.style.left = x + "px";
	div.style.top = y + "px";
	
	//将dom追加到body中
	document.body.appendChild(div);
	//准备一个状态的累加器
	var num = 1;
	//使用可循环定时器实现最终效果
	var timer = setInterval(() => {
		num++;
		if (num == 10) div.setAttribute("class", "opacity1");
		if (num == 20) div.setAttribute("class", "opacity2");
		y -= 5;
		div.style.left = x + "px";
		div.style.top = y + "px";
		//如果超出一定的范围，则删除此节点
		if (num == 30) {
			clearInterval(timer);
			div.remove();
		}
	}, 70);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39