<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disco Bulb Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #000000, #111111);
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 200px;
}
.wall {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
padding: 15px;
border-radius: 10px;
background: rgba(96, 95, 95, 0.281);
backdrop-filter: blur(10px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.bulb {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
backdrop-filter: blur(10px);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
transition: box-shadow 0.3s, background-color 0.3s;
}
.bulb.glow {
animation: disco 0.2s infinite alternate;
}
@keyframes disco {
0% {
background-color: rgba(255, 0, 128, 0.8);
box-shadow: 0 0 40px 40px rgba(255, 0, 128, 0.8);
}
25% {
background-color: rgba(0, 255, 128, 0.8);
box-shadow: 0 0 30px 10px rgba(0, 255, 128, 0.8);
}
50% {
background-color: rgba(0, 128, 255, 0.8);
box-shadow: 0 0 30px 10px rgba(0, 128, 255, 0.8);
}
75% {
background-color: rgba(255, 255, 0, 0.8);
box-shadow: 0 0 30px 10px rgba(255, 255, 0, 0.8);
}
100% {
background-color: rgba(255, 128, 0, 0.8);
box-shadow: 0 0 30px 10px rgba(255, 128, 0, 0.8);
}
}
.start-button {
position: absolute;
bottom: 50px;
padding: 15px 30px;
background: #ff5722;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
transition: background 0.3s;
}
.start-button:hover {
background: #ff784e;
}
</style>
</head>
<body>
<div class="container">
<div class="wall">
<div class="bulb" id="left-bulb-1"></div>
<div class="bulb" id="left-bulb-2"></div>
<div class="bulb" id="left-bulb-3"></div>
</div>
<div class="wall">
<div class="bulb" id="right-bulb-1"></div>
<div class="bulb" id="right-bulb-2"></div>
<div class="bulb" id="right-bulb-3"></div>
</div>
</div>
<button class="start-button" onclick="startDisco()">
Start</button>
<script>
async function startDisco() {
const leftBulbs = [
document.getElementById("left-bulb-1"),
document.getElementById("left-bulb-2"),
document.getElementById("left-bulb-3"),
];
const rightBulbs = [
document.getElementById("right-bulb-1"),
document.getElementById("right-bulb-2"),
document.getElementById("right-bulb-3"),
];
// Function to glow a bulb for 3 seconds
async function glowBulb(bulb) {
bulb.classList.add("glow");
await new Promise((resolve) =>
setTimeout(resolve, 3000));
bulb.classList.remove("glow");
}
// Glow bulbs on the left wall
for (let bulb of leftBulbs) {
await glowBulb(bulb);
}
// Glow bulbs on the right wall
for (let bulb of rightBulbs) {
await glowBulb(bulb);
}
}
</script>
</body>
</html>
Prince
Posted on
✨ Glowing Disco Bulbs Animation with a Glassmorphic Twist! ✨ Code HTML CSS AND JAVASCRIPT
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)