Site icon Css3 Transition

Lamp On Off Animation Using CSS

Hello friend today with this article I am going to share with you a very beautiful Lamp On Off Animation Using CSS. Here you will get a Lamp and a button when you click on button Lamp will open and close.

It is a just like a game as we play with our siblings to on off the bulb using switch same here I am using a hidden checkbox operating threw a label where whenever we click on Label Off lamp or Bulb will be Animate to brighter that means lamp is on now and again when we click its gone off shade of light that means it is off now.

This bulb on off animation is a repetitive process on each click.

Before proceeding to coding part I would like to share with you my last two awesome article that will definitely blow your mind by their effect.

Please this out here as link given below:

  1. Image hover with slide out title
  2. I Love You Text Animation

So now lets start coding for this bulb on/off animation using css:

HTML Structure:

CSS Stylsheet:

Exit mobile version