Skip to content

Instantly share code, notes, and snippets.

@katsumitakano

katsumitakano/index.html

Created March 29, 2014 13:20
Show Gist options
  • Save katsumitakano/9854378 to your computer and use it in GitHub Desktop.
Save katsumitakano/9854378 to your computer and use it in GitHub Desktop.
Download ZIP
Rotation Circle
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Rotation Circle</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div class="circle-container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>
</html>
Raw
style.css
#wrapper {
width: 960px;
height: 500px;
margin: 30px auto;
}
.circle-container {
margin: 0 auto;
position: relative;
width: 440px;
height: 440px;
background: transparent;
-webkit-animation: rotation 6s linear 0s infinite normal none;
-moz-animation: rotation 6s linear 0s infinite normal none;
-ms-animation: rotation 6s linear 0s infinite normal none;
-o-animation: rotation 6s linear 0s infinite normal none;
animation: rotation 6s linear 0s infinite normal none;
}
.circle {
position: absolute;
top: 170px;
left: 170px;
width: 100px;
height: 100px;
border-radius: 50%;
opacity: 0.7;
}
.circle:nth-child(1) {
-webkit-transform: rotate(0deg) translateX(150px);
-moz-transform: rotate(0deg) translateX(150px);
-ms-transform: rotate(0deg) translateX(150px);
-o-transform: rotate(0deg) translateX(150px);
transform: rotate(0deg) translateX(150px);
background: #ff504f;
}
.circle:nth-child(2) {
-webkit-transform: rotate(72deg) translateX(150px);
-moz-transform: rotate(72deg) translateX(150px);
-ms-transform: rotate(72deg) translateX(150px);
-o-transform: rotate(72deg) translateX(150px);
transform: rotate(72deg) translateX(150px);
background: #ffe63d;
}
.circle:nth-child(3) {
-webkit-transform: rotate(144deg) translateX(150px);
-moz-transform: rotate(144deg) translateX(150px);
-ms-transform: rotate(144deg) translateX(150px);
-o-transform: rotate(144deg) translateX(150px);
transform: rotate(144deg) translateX(150px);
background: #50dc64;
}
.circle:nth-child(4) {
-webkit-transform: rotate(216deg) translateX(150px);
-moz-transform: rotate(216deg) translateX(150px);
-ms-transform: rotate(216deg) translateX(150px);
-o-transform: rotate(216deg) translateX(150px);
transform: rotate(216deg) translateX(150px);
background: #41c39d;
}
.circle:nth-child(5) {
-webkit-transform: rotate(288deg) translateX(150px);
-moz-transform: rotate(288deg) translateX(150px);
-ms-transform: rotate(288deg) translateX(150px);
-o-transform: rotate(288deg) translateX(150px);
transform: rotate(288deg) translateX(150px);
background: #4db5dc;
}
/* Animations */
/*************************************************/
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-ms-keyframes rotation {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment