Skip to content

Instantly share code, notes, and snippets.

@SharmaTushar

SharmaTushar/orbit.html

Created February 12, 2017 18:43
Show Gist options
  • Save SharmaTushar/a0f7ec81bdb7575d7d1ae71a73de0247 to your computer and use it in GitHub Desktop.
Save SharmaTushar/a0f7ec81bdb7575d7d1ae71a73de0247 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
orbit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body { background-color: #222222; }
ul { width: 200px; height: 200px; position: absolute; top: 50%; bottom: 50%; left: 50%; right: 50%; }
ul li {
border-radius: 200px;
position: absolute;
list-style: none;
height: 150px;
width: 40px;
border: 2px solid #f8f8ff;
transition: linear 1s;
transform: translateX(0) translateY(-100px) translateZ(-20px) rotateY(0) scale(0.9);
transform-origin: 22% 50%;
animation: rotate-cw 16s linear infinite;
background: linear-gradient(#f8f8ff 0%, #222222 100%);
z-index: -1;
}
ul li:nth-child(1) { animation-delay: 0s; } ul li:nth-child(2) { animation-delay: 1s; } ul li:nth-child(3) { animation-delay: 2s; } ul li:nth-child(4) { animation-delay: 3s; } ul li:nth-child(5) { animation-delay: 4s; } ul li:nth-child(6) { animation-delay: 5s; } ul li:nth-child(7) { animation-delay: 6s; } ul li:nth-child(8) { animation-delay: 7s; } ul li:nth-child(9) { animation-delay: 8s; } ul li:nth-child(10) { animation-delay: 9s; } ul li:nth-child(11) { animation-delay: 10s; } ul li:nth-child(12) { animation-delay: 11s; } ul li:nth-child(13) { animation-delay: 12s; } ul li:nth-child(14) { animation-delay: 13s; } ul li:nth-child(15) { animation-delay: 14s; } ul li:nth-child(16) { animation-delay: 15s; }
@keyframes rotate-cw {
0% {
transform: translateX(0) translateY(-100px) translateZ(-20px) rotateY(0) scale(0.9);
z-index: -1;
}
25% {
transform: translateX(200px) translateY(-100px) translateZ(0px) rotateY(90deg) scale(1);
z-index: 0;
}
50% {
transform: translateX(0px) translateY(-100px) translateZ(20px) rotateY(180deg) scale(1.1);
z-index: 1;
}
75% {
transform: translateX(-200px) translateY(-100px) translateZ(0px) rotateY(270deg) scale(1);
z-index: 0;
}
100% {
transform: translateX(0px) translateY(-100px) translateZ(-20px) rotateY(360deg) scale(0.9);
z-index: -1;
}
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment