March 31, 2015

Swinging light bulb

Swinging light bulb

This is made by pure CSS3 and no JavaScript. Radio button is used to control the switch on and off. The swinging is done using CSS3 transform property. The light effect is done using CSS3 shadow property.

HTML

<div id="container">
  <input type="radio" name="switch" value="on" />
  <input type="radio" name="switch" value="off" checked="checked"/>
  <label for="switch"></label>
  <div id="holder"></div>
</div>

CSS

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
a {
   color: rgba(255,255,255,0.6);
}
#container {
   position: fixed;
   left: 50%;
   top: 0;
}
#holder {
   position: relative;
   background-color: #000000;
   width: 2px;
   height: 150px;
   left: 50%;
   margin-left: -1px;
   z-index: 1;
   -webkit-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
       -ms-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
           transform-origin: 0% 0%;
   -webkit-animation: oscillationholder .9s ease-in-out 0s infinite alternate;
      -moz-animation: oscillationholder .9s ease-in-out 0s infinite alternate;
       -ms-animation: oscillationholder .9s ease-in-out 0s infinite alternate;
        -o-animation: oscillationholder .9s ease-in-out 0s infinite alternate;
           animation: oscillationholder .9s ease-in-out 0s infinite alternate;
}
#holder:after {
   content: " ";
   left: -5px;
   top: 100%;
   position: absolute;
   border-bottom: 15px solid #000000;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   height: 0;
   width: 4px;
}
#lampadina {
   position:relative;
}
input[value="off"]:checked ~
#holder {
   -webkit-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
      -moz-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
       -ms-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
        -o-box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
           box-shadow: -80px -10px 7px 0 rgba(0,0,0,0.1);
}
input[value="off"]:checked ~
#holder:after {
   -webkit-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
      -moz-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
       -ms-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
        -o-box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
           box-shadow: -80px -10px 10px -2px rgba(0,0,0,0.1);
}

input {
   position: absolute;
   width: 90px;
   height: 70px;
   top: 150px;
   margin-left:-45px;
   opacity: 0;
   z-index: 1;
   cursor: pointer;
}

input[value="on"] {
   top: 150px;
}
input[value="off"] {
   top: -100px;
}
input[value="on"]:checked {
   top: -100px;
}
input[value="on"]:checked + input[value="off"] {
   top: 150px;
}

label {
   width: 51px;
   height: 51px;
   top: 164px;
   position: absolute;
   left: 0;
   margin-left: -24px;
   -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
       -ms-border-radius: 100%;
        -o-border-radius: 100%;
           border-radius: 100%;
   -webkit-animation: oscillationLamp .9s ease-in-out 0s infinite alternate;
      -moz-animation: oscillationLamp .9s ease-in-out 0s infinite alternate;
       -ms-animation: oscillationLamp .9s ease-in-out 0s infinite alternate;
        -o-animation: oscillationLamp .9s ease-in-out 0s infinite alternate;
           animation: oscillationLamp .9s ease-in-out 0s infinite alternate;
}           
input[value="off"]:checked ~
label {
   background: rgba(255,255,255,0.03);
   -webkit-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
      -moz-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
       -ms-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
        -o-box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
           box-shadow: inset 0px 1px 5px rgba(255,255,255,0.1), inset 0px 2px 20px rgba(255,255,255,0.07), -80px -15px 15px -5px rgba(0,0,0,0.1);
}
input[value="on"]:checked ~
label {
   background: rgba(255,255,255,1);
   -webkit-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px 70px rgba(255,255,255,0.6), -80px -15px 120px 0px rgba(255,255,255,0.4);
   -moz-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px 70px rgba(255,255,255,0.6), -80px -15px 120px 0px rgba(255,255,255,0.4);
   -ms-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px 70px rgba(255,255,255,0.6), -80px -15px 120px 0px rgba(255,255,255,0.4);
   -o-box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px 70px rgba(255,255,255,0.6), -80px -15px 120px 0px rgba(255,255,255,0.4);
   box-shadow: 0px 0px 10px rgba(255,255,255,0.8), 0px 0px 30px rgba(255,255,255,0.8), 0px 0px 50px rgba(255,255,255,0.6), 0px 0px 70px rgba(255,255,255,0.6), -80px -15px 120px 0px rgba(255,255,255,0.4);
}

input[value="off"]:checked ~
label:after {
   content: " ";
   width: 15px;
   height: 15px;
   top: 0;
   position: absolute;
   left: 0;
   margin-left: 15px;
   -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
       -ms-border-radius: 100%;
        -o-border-radius: 100%;
           border-radius: 100%;
   border: 2px solid rgba(255,255,255,0.03);
}

@-webkit-keyframes oscillationholder {
   from {
      -webkit-transform:rotate(5deg);
   } to {
      -webkit-transform:rotate(-5deg);
   }
}
@-moz-keyframes oscillationholder {
   from {
      -moz-transform:rotate(5deg);
   } to {
      -moz-transform:rotate(-5deg);
   }
}
@-ms-keyframes oscillationholder {
   from {
      -ms-transform:rotate(5deg);
   } to {
      -ms-transform:rotate(-5deg);
   }
}
@-o-keyframes oscillationholder {
   from {
      -o-transform:rotate(5deg);
   } to {
      -o-transform:rotate(-5deg);
   }
}
@keyframes oscillationholder {
   from {
      transform:rotate(5deg);
   } to {
      transform:rotate(-5deg);
   }
}

@-webkit-keyframes oscillationLamp {
   from {
      -webkit-transform: rotate(3deg) translate(-16.4px,-1px);
   } to {
      -webkit-transform: rotate(-3deg) translate(16.4px,-1px);
   }
}
@-moz-keyframes oscillationLamp {
   from {
      -moz-transform: rotate(3deg) translate(-16.4px,-1px);
   } to {
      -moz-transform: rotate(-3deg) translate(16.4px,-1px);
   }
}
@-ms-keyframes oscillationLamp {
   from {
      -ms-transform: rotate(3deg) translate(-16.4px,-1px);
   } to {
      -ms-transform: rotate(-3deg) translate(16.4px,-1px);
   }
}
@-o-keyframes oscillationLamp {
   from {
      -o-transform: rotate(3deg) translate(-16.4px,-1px);
   } to {
      -o-transform: rotate(-3deg) translate(16.4px,-1px);
   }
}
@keyframes oscillationLamp {
   from {
      transform: rotate(3deg) translate(-16.4px,-1px);
   } to {
      transform: rotate(-3deg) translate(16.4px,-1px);
   }
}
demo

No comments:

Post a Comment

Popular Posts

Views