Last active
August 29, 2015 14:07
-
-
Save webdesignberlin/7dbc4d653bbb7a92c624 to your computer and use it in GitHub Desktop.
animated background
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="image-wrap small"> | |
<div class="background"></div> | |
<div class="bulb1"></div> | |
<div class="bulb2"></div> | |
<div class="bulb3"></div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment