Scribd
Upload
17 views2 pages

Htmlviewer HTML

The document is an HTML file for a celebration titled 'Aliansi XiongNu', featuring a visually appealing design with a glowing title and animated fireworks. It includes CSS for styling and JavaScript to create and animate fireworks on the screen. The fireworks are generated periodically, enhancing the celebratory atmosphere of the page.

Uploaded by

aibeautypro9
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
17 views2 pages

Htmlviewer HTML

The document is an HTML file for a celebration titled 'Aliansi XiongNu', featuring a visually appealing design with a glowing title and animated fireworks. It includes CSS for styling and JavaScript to create and animate fireworks on the screen. The fireworks are generated periodically, enhancing the celebratory atmosphere of the page.

Uploaded by

aibeautypro9
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Aliansi XiongNu Celebration</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(black, #000033);
overflow: hidden;
text-align: center;
}

.title {
position: relative;
top: 30vh;
color: white;
font-family: 'Arial Black', sans-serif;
font-size: 4em;
text-shadow: 0 0 10px #ff0000;
animation: glow 2s ease-in-out infinite;
}

.firework {
position: absolute;
width: 4px;
height: 4px;
background: radial-gradient(circle, #ffff00 20%, #ff0000 100%);
border-radius: 50%;
}

@keyframes glow {
0%, 100% {
text-shadow: 0 0 10px #ff0000, 0 0 20px #ff4500;
transform: scale(1);
}
50% {
text-shadow: 0 0 20px #ff0000, 0 0 30px #ff4500;
transform: scale(1.05);
}
}
</style>
</head>
<body>
<h1 class="title">GO GO GO<br>ALIANSI XIONGNU</h1>

<script>
function createFirework() {
const colors = ['#ff0000', '#ffff00', '#00ff00', '#00ffff', '#ff00ff'];
const container = document.body;

for(let i = 0; i < 50; i++) {


const firework = document.createElement('div');
firework.className = 'firework';

// Random position and animation


const angle = Math.random() * Math.PI * 2;
const velocity = 1 + Math.random() * 5;
const color = colors[Math.floor(Math.random() * colors.length)];
firework.style.left = '50%';
firework.style.top = '50%';
firework.style.background = `radial-gradient(circle, ${color} 20%,
${color}00 100%)`;

// Animation
firework.style.transition = 'all 1.5s ease-out';
setTimeout(() => {
firework.style.transform = `translate(${Math.cos(angle) *
300}px, ${Math.sin(angle) * 300}px)`;
firework.style.opacity = '0';
}, 10);

container.appendChild(firework);

// Remove element after animation


setTimeout(() => firework.remove(), 1600);
}
}

// Create initial fireworks


createFirework();

// Create fireworks periodically


setInterval(() => {
createFirework();
}, 1500);
</script>
</body>
</html>

You might also like