Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <b></b>
  </section>
</body>
</html>
 
section {
  background: black;
  position: relative;
  width: 360px; height: 360px;
}
div {
  position: absolute;
  width: 10px; height: 10px;
  z-index: 1
}
div:nth-child(1){
  background: #bd8a33;
  width: 46px; height: 160px;
  transform:  
    translate(155px, 26px) 
    rotate(-30deg) 
    skewX(30deg)  
}
div:nth-child(2){
  background: #73531d;
  width: 46px; height: 195px;
  transform:  
    translate(75px, 98px) 
    rotate(30deg) 
    skewX(30deg) 
}
div:nth-child(3){
  background: #73531d;
  width: 46px; height: 160px;
  transform:  
    translate(135px, 60px) 
    rotate(90deg) 
    skewX(-30deg) 
}
div:nth-child(4){
  background: #bd8a33;
  width: 46px; height: 155px;
  transform:  
    translate(194px, 117.5px) 
    rotate(30deg) 
    skewX(-30deg) 
}
div:nth-child(5){
  background: #ab7c2b;
  width: 46px; height: 117px;
  transform:  
    translate(115px, 159px) 
    rotate(30deg) 
    skewX(30deg) 
}
div:nth-child(6){
  background: #ab7c2b;
  width: 46px; height: 196px;  
  transform:  
    translate(193px, 142px) 
    rotate(-90deg) 
    skewX(30deg) 
}
b {
  z-index: 1;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: block;
  background: #ccc;
  box-shadow: inset 0 -4px 16px #222;
  animation: move 16s infinite linear
}
@keyframes move {
  0% { transform: translate( 72px,  26px); z-index: 2 }
  9% { transform: translate(255px, 135px); z-index: 2 }
  14.9% { z-index: 2 }
  15% { transform: translate(130px, 205px); z-index: 0 }
  22% { transform: translate(130px,  55px); z-index: 0 }
  32.9% { z-index: 0 }
  33% { transform: translate(314px, 167px); z-index: 2 }  
  42% { transform: translate(128px, 274px); z-index: 2 }
  49.9% { z-index: 2 }
  50% { transform: translate(128px, 134px); z-index: 0 }
  56% { transform: translate(268px, 200px); z-index: 0 }
  63.9% { z-index: 0 }
  64% { transform: translate( 72px, 306px); z-index: 2 }
  72% { transform: translate( 72px,  96px); z-index: 2 }
  82.9% { z-index: 2 }
  83% { transform: translate(188px, 164px); z-index: 0 }
  91% { transform: translate( 72px, 245px); z-index: 0 }
  99.9% { z-index: 0 }
  100% { transform: translate( 72px,  26px); z-index: 2 }
}
body {
  margin: 0;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers