Bouncing Text🦘
Credits to MA Gang
Credits to MA Gang
How to setup:
Paste in the code
Go down to the code
<span style="--i:0">1</span>
<span style="--i:1">2</span>
<span style="--i:2">3</span>
<span style="--i:3">4</span>
<span style="--i:4">5</span>
<span style="--i:5">6</span>
<span style="--i:6">7</span>
Replace the numbers in bewteen "><" with one letter for your word
Preview
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>by UNBL0CKEDZ0NE</title>
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@700&display=swap" rel="stylesheet">
<style>
body {
background: trans;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* Bouncy neon text container */
.bouncy-text {
font-family: 'Pixelify Sans', sans-serif;
font-size: 4em;
font-weight: 700;
display: flex;
}
/* Individual letters with white neon glow */
.bouncy-text span {
display: inline-block;
animation: bounce 1s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.1s);
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff,
0 0 20px #fff;
}
/* Bounce animation */
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
</style>
</head>
<body>
<div class="bouncy-text">
<span style="--i:0">1</span>
<span style="--i:1">2</span>
<span style="--i:2">3</span>
<span style="--i:3">4</span>
<span style="--i:4">5</span>
<span style="--i:5">6</span>
<span style="--i:6">7</span>
</div>
</body>
</html>