HTML, CSS 및 자바 스크립트를 사용한 디왈리 애니메이션 https://www.instagram.com/webstreet_code/
- Mary-Kate Olsen원래의
- 2024-11-03 00:41:30423검색
https://www.instagram.com/webstreet_code/
코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diwali Diyas Animation</title>
<!-- Importing Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Moon+Dance&display=swap" rel="stylesheet">
<style>
/* Full-screen setup */
body {
margin: 0;
overflow: hidden;
background-color: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative; /* Positioning context for firecrackers */
}
.container {
z-index: 1;
display: block;
color: white;
text-align: center; /* Center align heading */
}
.heading {
z-index: 1;
margin: 5px;
padding: 50px;
font-size: 50px;
font-family: 'Moon Dance', cursive; /* Apply the Moon Dance font */
text-shadow: 0 0 20px rgba(255, 255, 0, 1), 0 0 30px rgba(255, 255, 0, 1); /* Yellow glowing effect */
}
/* Container for positioning diyas */
.diya-container {
display: flex;
gap: 20px; /* Space between diyas */
justify-content: center; /* Center diyas in the container */
}
/* Diya setup */
.diya {
z-index: 1;
position: relative;
width: 60px; /* Width of diya */
height: 30px; /* Height of diya */
background-color: #8B4513; /* Brown bowl color */
border-bottom-left-radius: 30px; /* Bowl shape */
border-bottom-right-radius: 30px; /* Bowl shape */
box-shadow: 0 0 20px rgba(255, 165, 0, 0.6); /* Glowing effect */
transition: box-shadow 0.3s ease; /* Smooth transition for glow */
}
/* Flame setup */
.flame {
position: absolute;
width: 10px; /* Width of flame */
height: 20px; /* Height of flame */
background: radial-gradient(circle, #FFA500, #FF4500); /* Flame gradient */
border-radius: 50%; /* Flame shape */
left: 50%; /* Center the flame horizontally */
transform: translateX(-50%); /* Center the flame */
top: -15px; /* Position above diya */
animation: flicker 1s infinite alternate; /* Flickering animation */
}
/* Slower flickering flame effect */
@keyframes flicker {
0% { transform: translateX(-50%) scale(1); opacity: 1; }
50% { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* Glowing effect on hover */
.diya {
box-shadow: 0 0 30px rgba(255, 165, 0, 1); /* Intensified glow on hover */
}
/* Firecracker styles */
.firecracker {
z-index: 0.8;
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
animation: explode 0.8s forwards;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Burst effect styles */
.burst {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
animation: burst 1s forwards;
}
@keyframes burst {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">Happy Diwali</h1>
<!-- Container holding all diyas -->
<div class="diya-container">
<div class="diya">
<div class="flame"></div>
</div>
<div class="diya">
<div class="flame"></div>
</div>
<div class="diya">
<div class="flame"></div>
</div>
<div class="diya">
<div class="flame"></div>
</div>
<div class="diya">
<div class="flame"></div>
</div>
</div>
</div>
<script>
// Function to generate random color
function getRandomColor() {
const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'purple', 'cyan', 'magenta'];
return colors[Math.floor(Math.random() * colors.length)];
}
// Function to create firecrackers
function createFirecrackers() {
const body = document.body;
for (let i = 0; i < 30; i++) { // 8 firecrackers at a time
const firecracker = document.createElement('div');
firecracker.classList.add('firecracker');
// Random position
firecracker.style.left = Math.random() * 100 + 'vw';
firecracker.style.top = Math.random() * 100 + 'vh'; // Random vertical position
// Set random color
firecracker.style.backgroundColor = getRandomColor();
body.appendChild(firecracker);
// Create bursts after firecracker animation
setTimeout(() => {
createBursts(firecracker);
firecracker.remove(); // Remove firecracker after it explodes
}, 1000); // Time when firecracker explodes
}
}
function createBursts(firecracker) {
const body = document.body;
const positions = [
{ x: -20, y: -20 }, // Top-left
{ x: 20, y: -20 }, // Top-right
{ x: -20, y: 20 }, // Bottom-left
{ x: 20, y: 20 } // Bottom-right
];
positions.forEach(pos => {
const burst = document.createElement('div');
burst.classList.add('burst');
burst.style.left = firecracker.offsetLeft + 'px'; // Use firecracker's position
burst.style.top = firecracker.offsetTop + 'px'; // Use firecracker's position
burst.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
burst.style.backgroundColor = firecracker.style.backgroundColor; // Same color as firecracker
body.appendChild(burst);
// Remove burst after animation completes
burst.addEventListener('animationend', () => {
burst.remove();
});
});
}
// Delay firecracker animation
setInterval(createFirecrackers, 2000); // Create firecrackers every 2 seconds
</script>
</body>
</html>
위 내용은 HTML, CSS 및 자바 스크립트를 사용한 디왈리 애니메이션 https://www.instagram.com/webstreet_code/의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.