Bulb ON - OFF Animation using HTML and CSS.

Hey guy's another very good program for you all! This is a simple web program that will show BULB ON - OFF Animation using Only HTML and CSS code .No JavaScript code is used . We have used two images , one is when Bulb is OFF and another when bulb is ON. As you press button that we have designed then you will find that bulb is glowing and if you repress that button again if bulb is ON then Bulb will be OFF and vice versa. We have smartly used OPACITY property of CSS. So see the below code and understand that how did we use opacity property in our code.

PROGRAM SOURCE CODE :-

1) HTML Coding Part :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulb ON/OFF Aniamtion Creation</title>
    <link rel="stylesheet" href="Bulb_ON_OFF.css">
</head>
<body>
    <header>
        <marquee scrollamount="10">
            <h1>Bulb On - off Aniamtion</h1>   
        </marquee>
    </header>
    <div class="main">
        <input type="checkbox" id="i"/>
        <label for="i">
            <h1></h1>
        </label>
        <div class="image-container">
            <img src="bulb-off.png" alt="bulb is OFF" id="i1">
            <img src="bulb-on.png" alt="bulb is ON" id="i2">
        </div>
    </div>
</body>
</html>

2) CSS Coding Part :-

*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 62.5%;
}
:root{
    --b : #000;
    --w : #fff;
}
body{
    background-color: var(--b);
    overflow: hidden;
}
header{
    width: 100%;
    height: 0vh;
    padding-top: 1rem;
}
header marquee h1{
    color: var(--w);
    font-size: 3rem;
    font-family:'Segoe UI';
    text-transform: uppercase;
    letter-spacing: .15rem;
}

.main{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.image-container{
    width: 40rem;
    height: 40rem;
    position: relative;
}

img{
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}
label{
    position: absolute;
    bottom: 7rem;
    padding: 1rem 2rem;
    cursor: pointer;
    font-family:Verdana;
    font-weight: 600;
    letter-spacing: .12rem;
    border-radius: 1rem;
    outline: none;
    color:var(--b);
    background-color: #ffd;
}
label h1::before{
    content: 'SWITCH ON';
}
input{
    display: none;
}
#i2{
    opacity: 0;
}
#i:checked ~.image-container #i2{
    opacity: 1;
}
#i:checked ~ label h1::before{
    content: 'SWITCH OFF';
}