Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-primary" data-bs-theme="dark">
	<div class="container-fluid">
		<div class="navbar-brand">
			<h3>Reiuji Utsuho</h3>
			<i class="fa-solid fa-star"></i>
			<i class="fa-solid fa-star"></i>
			<i class="fa-solid fa-star"></i>
		</div>
		<div class="text-white">
			<h4>Notification Sign "Peta Bell"</h4>
			<span class="position-relative pe-2 ">History: 00/<i id="notification-toggle" class="fa-solid fa-bell text-warning fs-3"></i><span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger ">99+</span>
			</span><br>
			<span id="hint" class="opacity-0">Click the bell to turn off notification</span>
		</div>
	</div>
	</div>
</nav>
<div id="bullets"></div>
<div id="warning">
	<div class="warning-text">
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
	</div>
	<div class="warning-icon">
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
		<span><i class="fa-regular fa-bell"></i></span>
	</div>
	<div class="warning-text">
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
		<span>NOTIFICATION!!</span>
	</div>
</div>
<main data-bs-theme="dark" class="container">
	<div class="row g-5 gy-5 mt-5">
		<div class="col-12 col-md-6">
			<div class="card" aria-hidden="true">
				<div class="card-body">
					<h5 class="card-title">
						<i class=" fa-3x fa-regular fa-circle-user text-secondary"></i>
						<span class="placeholder col-6"></span>
					</h5>
					<p class="card-text">
						<span class="placeholder col-7"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-6"></span>
						<span class="placeholder col-8"></span>
					</p>
					<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<div class="card" aria-hidden="true">
				<div class="card-body">
					<h5 class="card-title">
						<i class=" fa-3x fa-regular fa-circle-user text-secondary"></i>
						<span class="placeholder col-6"></span>
					</h5>
					<p class="card-text">
						<span class="placeholder col-7"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-6"></span>
						<span class="placeholder col-8"></span>
					</p>
					<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<div class="card" aria-hidden="true">
				<div class="card-body">
					<h5 class="card-title">
						<i class=" fa-3x fa-regular fa-circle-user text-secondary"></i>
						<span class="placeholder col-6"></span>
					</h5>
					<p class="card-text">
						<span class="placeholder col-7"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-6"></span>
						<span class="placeholder col-8"></span>
					</p>
					<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<div class="card" aria-hidden="true">
				<div class="card-body">
					<h5 class="card-title">
						<i class=" fa-3x fa-regular fa-circle-user text-secondary"></i>
						<span class="placeholder col-6"></span>
					</h5>
					<p class="card-text">
						<span class="placeholder col-7"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-6"></span>
						<span class="placeholder col-8"></span>
					</p>
					<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<div class="card" aria-hidden="true">
				<div class="card-body">
					<h5 class="card-title">
						<i class=" fa-3x fa-regular fa-circle-user text-secondary"></i>
						<span class="placeholder col-6"></span>
					</h5>
					<p class="card-text">
						<span class="placeholder col-7"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-6"></span>
						<span class="placeholder col-8"></span>
					</p>
					<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
				</div>
			</div>
		</div>
		<div class="col-12 col-md-6">
			<div class="card" aria-hidden="true">
				<div class="card-body">
					<h5 class="card-title">
						<i class=" fa-3x fa-regular fa-circle-user text-secondary"></i>
						<span class="placeholder col-6"></span>
					</h5>
					<p class="card-text">
						<span class="placeholder col-7"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-4"></span>
						<span class="placeholder col-6"></span>
						<span class="placeholder col-8"></span>
					</p>
					<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
				</div>
			</div>
		</div>
	</div>
</main>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #212529;
}
#notification-toggle {
	cursor: pointer;
}
#warning {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-end;
	white-space: nowrap;
	color: #dd0;
	font-size: 0px;
	pointer-events: none;
}
#warning > * {
	animation: slide 1s linear forwards 3, fade 1s 2s linear forwards;
}
.warning-text {
	--direction: 1;
}
.warning-text > span {
	font-size: 2.5rem;
	display: inline-block;
	text-align: center;
	width: 11.8em;
	margin: 0 0.1em;
	position: relative;
	text-shadow: 0.1em 0.1em 0 #555;
}
.warning-text > span::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0.1em solid #555;
	border-style: solid none;
	transform: translate(0.1em, 0.1em);
}
.warning-text > span::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0.1em solid;
	border-style: solid none;
}

.warning-icon {
	--direction: -1;
	align-self: flex-start;
}

.warning-icon > span {
	display: inline-block;
	font-size: 10rem;
	text-align: center;
	width: 3em;
	text-shadow: 0.05em 0.05em 0 #555;
}

@keyframes slide {
	0% {
		transform: translateX(0);
	}

100% {
		transform: translateX(calc(var(--direction) * 10%));
	}
}
@keyframes fade {
	0% {
		opacity: 1;
	}

100% {
		opacity: 0;
	}
}
#bullets {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	animation-play-state: paused;
	pointer-events: none;
}

#bullets * {
	animation-play-state: inherit;
}

.big-bullet {
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	justify-items: center;
	align-items: center;
	font-size: var(--big-size);
	width: 1em;
	height: 1em;
	opacity: 0;
	animation: big-bullet 5s var(--delay) linear;
}

.big-bullet::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(200, 200, 0, 0.85);
	border-radius: 50%;
	grid-column-start: 1;
	grid-row-start: 1;
	box-shadow: inset 0 0 0.1em #ff0, inset 0 0 0.05em #fff, inset 0 0 0.02em #fff,
		0 0 0.2em #ff0;
}

.big-bullet::after {
	display: block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font-solid);
	content: "\f0f3";
	font-size: 0.8em;
	color: #fff;
	text-shadow: 0 0 0.05em #fff, 0 0 0.1em #fff, 0 0 0.2em #fff;
	animation: fa-shake 1.5s var(--delay) infinite;
	grid-column-start: 1;
	grid-row-start: 1;
}

.bullet-ring {
	display: grid;
	position: absolute;
	top: 0;
	left: 0;
	justify-items: center;
	align-items: center;
	transform: translate(var(--x), var(--y));
}

.small-bullet {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-column-start: 1;
	grid-row-start: 1;
	opacity: 0;
	background-color: #fff;
	padding: 0.4em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	box-shadow: 0 0 5px #fff, 0 0 7px #00fa, 0 0 10px #00fa;
	animation: small-bullet 15s var(--delay) ease-out forwards;
}

.small-bullet::before {
	content: "99+";
	color: blue;
	font-size: 0.8em;
	font-weight: bold;
	text-shadow: 0 0 1px #00fe, 0 0 5px #00fa;
}

@keyframes big-bullet {
	0% {
		opacity: 1;
		transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(0);
	}

5% {
		transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(1);
	}

100% {
		opacity: 1;
		transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50% + 110vh))
			scale(0);
	}
}

@keyframes small-bullet {
	0% {
		opacity: 1;
		transform: rotate(var(--r)) translatey(0) rotate(calc(var(--r) * -1));
	}

100% {
		opacity: 1;
		transform: rotate(var(--r)) translatey(150vmax) rotate(calc(var(--r) * -1));
	}
}

console.log("Event Fired")
const div = document.querySelector("#bullets");
const bigSize = "25rem";
const bigBulletCount = 22;
const smallBulletCount = 18;
const delayStep = 5 / bigBulletCount;
div.style.setProperty("--big-size", `${bigSize}`);

div.onanimationend = (e) => {
	if (e.pseudoElement == "" && e.target.classList.contains("big-bullet")) {
		e.target.remove();
		createNewRing(div, smallBulletCount);
	}
};
for (let i = 0; i < bigBulletCount; i++) {
	createNewRing(div, smallBulletCount, (i + 1) * delayStep);
}
function createNewRing(div, count, delay = 0) {
	let x = Math.random() * 100;
	let y = Math.random() * 25 + 5;

Frontend Forever App