Skip to content

Instantly share code, notes, and snippets.

@altras
Created March 9, 2013 16:07
Show Gist options
  • Save altras/5124638 to your computer and use it in GitHub Desktop.
Save altras/5124638 to your computer and use it in GitHub Desktop.
Animated WarCluster logo: http://codepen.io/altras/full/Hwixy
<div class="logo_container">
<div class="circle1">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/circle1.png"
/>
</div>
<div class="circle2">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/circle2.png"
/>
</div>
<div class="circle3">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/circle3.png"
/>
</div>
<div class="circle4">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/circle4.png"
/>
</div>
<div class="circle5">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/circle5.png"
/>
</div>
<div class="logo">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/planet.png"
/>
</div>
<div class="white_particles">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/white_particles.png"
/>
</div>
<div class="orange_particles">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/orange_particles.png"
/>
</div>
<div class="x_ring">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/x_ring.png"
/>
</div>
<div class="y_ring">
<img src="http://game-craft.com/blog/wp-content/uploads/2013/03/y_ring.png"
/>
</div>
</div>
.logo_container {
position:relative;
left: 20%;
margin-top:50px;
/* -moz-animation:spinoffPulse 5s infinite linear;
-webkit-animation:spinoffPulse 5s infinite linear;
-moz-animation:pulse 3s infinite ease-in-out;
-webkit-animation:pulse 3s infinite ease-in-out;*/
}
.logo {
margin: -338px auto;
position:absolute;
}
.circle1 {
position:absolute;
-webkit-transform-origin: 167px 167px;
-moz-animation:counterClockwiseSpin 5s infinite ease-in;
-webkit-animation:counterClockwiseSpin 5s infinite ease-in;
}
.circle2 {
position:absolute;
-webkit-transform-origin: 167px 167px;
-moz-animation:clockwiseSpin 1s infinite ease-out;
-webkit-animation:clockwiseSpin 1s infinite ease-out;
}
.circle3 {
position:absolute;
-webkit-transform-origin: 167px 167px;
-moz-animation:clockwiseSpin 8s infinite ease-in-out;
-webkit-animation:clockwiseSpin 8s infinite ease-in-out;
}
.circle4 {
position:absolute;
-moz-transform-origin: 167px 167px;
-webkit-transform-origin: 167px 167px;
-moz-animation:clockwiseSpin 8s infinite ease;
-webkit-animation:clockwiseSpin 8s infinite ease;
}
.circle5 {
position:relative;
-moz-transform-origin: 167px 167px;
-webkit-transform-origin: 167px 167px;
-moz-animation:clockwiseSpin 3s infinite;
-webkit-animation:clockwiseSpin 3s infinite;
}
.x_ring {
position:relative;
margin: -288px 0px 0px -55px;
}
.y_ring {
position:relative;
margin: -333px 0px 0px 33px;
}
.white_particles {
position:absolute;
margin: -350px 0px 0px -35px;
-moz-animation:pulse 8s infinite ease-in-out;
-webkit-animation:pulse 8s infinite ease-in-out;
}
.orange_particles {
position:absolute;
margin: -332px 0px 0px 42px;
-moz-animation:pulse 6s infinite ease-in-out;
-webkit-animation:pulse 6s infinite ease-in-out;
}
@-webkit-keyframes pulse {
0% {-webkit-transform:scale(1, 1);}
50% {-webkit-transform:scale(1.1, 1.1)}
100% {-webkit-transform:scale(1, 1);}
}
@-moz-keyframes pulse {
0% {-moz-transform:scale(1, 1);}
50% {-moz-transform:scale(1.1, 1.1);}
100% {-moz-transform:scale(1, 1);}
}
@-moz-keyframes clockwiseSpin {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(360deg);}
}
@-webkit-keyframes clockwiseSpin {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes counterClockwiseSpin {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(-360deg);}
}
@-webkit-keyframes counterClockwiseSpin {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(-360deg);}
}
@altras
Copy link
Author

altras commented Mar 9, 2013

Animated WarCluster logo: http://codepen.io/altras/full/Hwixy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment