A Pen by Brandon Lawrence.

Hvqes.markdown

Hvqes

If you need a Jr Dev in the D.C. area shoot me a message!

A Pen by Brandon Lawrence on CodePen.

License.

index.html

<div class="image-wrap small">
  <div class="background"></div>
  <div class="bulb1"></div>
  <div class="bulb2"></div>
  <div class="bulb3"></div>
</div>

style.css

body {
	background-color: #5796d4;
    overflow-x: hidden;
    font-family: "Roboto Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Assets */
.image-wrap {
position:relative;
width:100%;
margin:0 auto;
overflow:hidden;
}
.image-wrap.small .background{
background:url(http://www.blawsolutions.com/img/background.jpg) no-repeat;
background-size:cover;
width:100%;
height:650px;
position:relative;
}
.image-wrap.small .bulb1{
background:url(http://www.blawsolutions.com/img/bulb-1.png) no-repeat center center;
background-size:contain;
position:absolute;
width:272px;
height:412px;
left:42%;
top:0%;
z-index: 3;
animation: pendulum1 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
 -webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}

.image-wrap.small .bulb2{
background:url(http://www.blawsolutions.com/img/bulb-2.1.png) no-repeat center center;
background-size:contain;
position:absolute;
 z-index: 1;
width:144px;
height:418px;
left:36%;
top:21%;
z-index: 2;
animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
   -webkit-animation: pendulum 9s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
  transform-origin:center top;
}
.image-wrap.small .bulb3{
background:url(http://www.blawsolutions.com/img/bulb-3.png) no-repeat center center;
background-size:contain;
position:absolute;
width:72px;
height:309px;
left:32%;
top:266px;
z-index: 1;
animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
   -webkit-animation: pendulum 10s infinite cubic-bezier(0.310, 0.440, 0.445, 1.650);
transform-origin:center top;
}

.image-wrap.small .bulb1:hover{
  
}
.image-wrap.small .bulb2:hover{
  
}
.image-wrap.small .bulb3:hover{
  
}
/* Keyframes */
@-webkit-keyframes
pendulum {
    0%, 100% { transform: rotate(2deg); }
    25%, 75% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }

}
pendulum1 {
    0%, 100% { transform: rotate(.6deg); }
    25%, 75% { transform: rotate(-1.2deg); }
    50% { transform: rotate(1.2deg); }

}
@keyframes pendulum {
    0%, 100% { transform: rotate(2deg); }
    25%, 75% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }

}
pendulum1 {
    0%, 100% { transform: rotate(.6deg); }
    25%, 75% { transform: rotate(-1.2deg); }
    50% { transform: rotate(1.2deg); }

}