Glowing Lamp Animation with HTML & CSS

💡 Glowing Lamp Animation with HTML & CSS | Realistic Light Effect 🔥

Introduction

Want to create a realistic glowing lamp animation using only HTML and CSS? In this tutorial, we'll build a stunning lamp animation that glows dynamically when a pull rope is used to turn it on. This project is perfect for beginners and web developers who want to improve their CSS animation skills. No JavaScript is required—just pure CSS magic!

Why Use CSS for Animations?

CSS animations are lightweight, smooth, and easy to implement. They enhance user experience without affecting website performance. Some benefits of CSS animations include:

Better performance than JavaScript in most cases.
Smooth transitions for an engaging UI.
No extra scripts needed—just HTML and CSS.

Features of the Glowing Lamp Animation

A beautifully designed lamp with a glowing light effect.
A pull rope mechanism to turn the lamp on and off.
Soft lighting transitions for realism.
Fully responsive and pure CSS-based animation.

Step-by-Step Guide to Creating a Glowing Lamp Animation

Step 1: Setting Up the HTML Structure

We'll create a simple HTML file with a div structure for the lamp and the pull rope.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Lamp Animation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="lamp-container">
        <div class="lamp">
            <div class="bulb"></div>
            <div class="light"></div>
        </div>
        <div class="rope"></div>
    </div>
</body>
</html>

Step 2: Adding CSS for Styling and Animation

Now, let's add CSS animations for the glowing effect and the pull rope.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #222;
    overflow: hidden;
}

.lamp-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lamp {
    width: 80px;
    height: 120px;
    background: #444;
    border-radius: 50% 50% 0 0;
    position: relative;
}

.bulb {
    width: 40px;
    height: 40px;
    background: #ffcc00;
    border-radius: 50%;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 20px 10px rgba(255, 204, 0, 0.5);
    transition: box-shadow 0.3s ease-in-out;
}

.light {
    width: 120px;
    height: 150px;
    background: rgba(255, 204, 0, 0.2);
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.5);
    transition: opacity 0.3s ease-in-out;
}

.rope {
    width: 5px;
    height: 100px;
    background: #666;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.lamp-container:hover .bulb {
    box-shadow: 0 0 40px 20px rgba(255, 204, 0, 0.8);
}

.lamp-container:hover .light {
    opacity: 1;
}

Step 3: Understanding the CSS Animation

The bulb has a box-shadow glow effect that intensifies when hovered.
The light div creates a soft glow using a transparent yellow background.
The hover effect on the lamp-container simulates turning the lamp on/off.

Enhancing the Animation with JavaScript (Optional)

If you want the lamp to toggle on and off with a click instead of a hover, you can add JavaScript.

document.querySelector(".lamp-container").addEventListener("click", function() {
    this.classList.toggle("active");
});

Final Thoughts

This glowing lamp animation is a great way to practice CSS transitions and animations. You can further improve it by:

Adding a flickering effect for a more realistic glow.
Using SVGs for more detailed designs.
Implementing dark mode interactions.

Live Demo & Source Code

Try this effect in your projects! If you found this tutorial helpful, feel free to share, comment, and subscribe for more web development tutorials.

Glowing Lamp Animation with HTML & CSS | Realistic Light Effect