點擊網頁實現文字上浮消失的特效

引入

<link rel="stylesheet" href="/static/click/click.css">
<script src="/static/click/click.js"></script>
CSS文件：

* {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100vh;
}

.text_popup {
	animation: textPopUp 1.8s;
	position: absolute;
	user-select: none;
	white-space: nowrap;
	z-index: 999; //保持文字在最上層顯示
}

@keyframes textPopUp {
	0% {
		opacity: 1; //不透明度爲0%
	}
	100% {
		opacity: 0;//不透明度爲100%
	}
	50% {
		opacity: 0.6;
	}
	100% {
		transform: translateY(-140px);
	}
}

JS文件：

var getRandomColor = function() {
	return '#' + (function(h) {
		return new Array(7 - h.length).join("0") + h
	})((Math.random() * 0x1000000 << 0).toString(16))
}
var showText = function(textArr) {
	if (!textArr || textArr.length == 0) {
		return;
	}
	var index = 0;
	document.documentElement.addEventListener('click', function(e) {
		var x = e.pageX;
		var y = e.pageY;
		var text = document.createElement('span');
		text.setAttribute('class', 'text_popup');
		this.appendChild(text);
		if (textArr[index]) {
			text.innerHTML = textArr[index];
		} else {
			index = 0;
			text.innerHTML = textArr[index];
		}
		text.style.color = getRandomColor();
		text.addEventListener('animationend', function() {
			text.parentNode.removeChild(text);
		}, false)
		if (x < text.clientWidth) {
			text.style.left = x + 'px';
		} else if (text.clientWidth > (document.documentElement.clientWidth - x)) {
			text.style.left = (x - text.clientWidth) + 'px';
		} else {
			text.style.left = (x - text.clientWidth / 2) + 'px';
		}

		text.style.top = (y - text.clientHeight / 2) + 'px';
		index++;
	}, false)
}
showText(['~❤行也歡喜❤~','~❤停也歡喜❤~','~❤眉目帶笑❤~','~❤醉如春風❤~','~❤浮生如夢❤~','~❤歲月如舟❤~','❤❤',
'❤我一直渴望有一個人❤','❤能夠歲月經年仍拉住我不放❤','❤不許我墮落❤','❤不許我沉淪❤','❤不許我隨波逐流❤','❤❤',
'❤寫盡千山 落筆是你❤','❤望盡星辰 美麗是你❤','❤書盡泛黃 扉頁是你❤','❤千山萬水 歸處是你❤','❤❤',
'❤遇見你開始❤','❤眉眼彎彎 星河皆你❤','❤春風十里不如你❤','❤夢裏夢外都是你❤','❤❤',
'❤你笑起來的時候❤','❤眼裏住滿了星辰❤','❤驚豔了時光❤','❤亦溫柔了歲月❤',
'❤願你溫柔如初❤','❤深情不被辜負❤','❤願你後來安好❤','❤即使與我無關❤','❤願你走出半生❤','❤歸來仍是少年❤',
'❤願你前程似錦❤','❤而我一無所知❤','❤願你遍歷山河❤','❤覺得人間值得❤','❤願你眼角帶笑❤','❤明月不染眉悄❤'])