SOURCE

console 命令行工具 X clear

                    
>
console
const container = document.getElementById('container');

const timeToRunAnim = 5000;
let starIdx = 0;

setInterval(() => createStars(7), 100);

function createStar() {
	const starEl = document.createElement('div');
	const styleEl = document.createElement('style');
	starEl.classList.add('star');
	starEl.classList.add(`star-${++starIdx}`);
	starEl.style.animation = `moveto-${starIdx} ${timeToRunAnim}ms linear forwards`;
	
	const endX = Math.random() * 200 - 100;
	const endY = Math.random() * 200 - 100;
		
	styleEl.innerHTML += `
		@keyframes moveto-${starIdx} {
			20% {
				opacity: 0;
			}
			50% {
				opacity: 1;
			}
			100% {
				transform: scale(3) translate(${endX}vw, ${endY}vh);
				opacity: 0;
			}
		}
	`;
	
	container.appendChild(starEl);
	container.appendChild(styleEl);
	
	setTimeout(() => {
		starEl.remove();
		styleEl.remove();
	}, timeToRunAnim);
}

function createStars(num) {
	for(let i=0; i<num; i++) {
		createStar();
	}
}
<div class="container" id="container">
</div>
body {
	margin: 0;
}

.container {
	background-image: url("https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=100");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	height: 100vh;
	width: 100vw;
}

.star {
	background-color: #fff;
	box-shadow: 0 0 10px rgba(255, 255, 255);
	border-radius: 50%;
	position: absolute;
	opacity: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 4px;
	width: 4px;
}