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>
  <div class='bubble'></div>
</body>
</html>
 
/* http://imgur.com/a/FywLp#31 */
html:after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10.6066em;
  width: 21.2132em;
  height: 21.2132em;
  box-shadow: 0 0 0 10em white;
  content: '';
}
​
.bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5em;
  width: 10em;
  height: 10em;
  border-radius: 50%;
  box-shadow: 0 0 0 2px black, 0 0 0 4px white, inset 0 0 0 2px white, 0 0 0 3px black, 0 0 0 -0.5em black, 0 0 0 0em white, inset 0 0 0 -0.5em black, inset 0 0 0 0em white, 0 0 0 0.5em black, 0 0 0 1em white, inset 0 0 0 0.5em black, inset 0 0 0 1em white, 0 0 0 1.5em black, 0 0 0 2em white, inset 0 0 0 1.5em black, inset 0 0 0 2em white, 0 0 0 2.5em black, 0 0 0 3em white, inset 0 0 0 2.5em black, inset 0 0 0 3em white, 0 0 0 3.5em black, 0 0 0 4em white, inset 0 0 0 3.5em black, inset 0 0 0 4em white, 0 0 0 4.5em black, 0 0 0 5em white, inset 0 0 0 4.5em black, inset 0 0 0 5em white, 0 0 0 5.5em black, 0 0 0 6em white, inset 0 0 0 5.5em black, inset 0 0 0 6em white, 0 0 0 6.5em black, 0 0 0 7em white, inset 0 0 0 6.5em black, inset 0 0 0 7em white, 0 0 0 7.5em black, 0 0 0 8em white, inset 0 0 0 7.5em black, inset 0 0 0 8em white, 0 0 0 8.5em black, 0 0 0 9em white, inset 0 0 0 8.5em black, inset 0 0 0 9em white;
  animation: ani .25s linear infinite;
}
​
@keyframes ani {
  to {
    box-shadow: 0 0 0 2px black, 0 0 0 4px white, inset 0 0 0 2px white, 0 0 0 3px black, 0 0 0 0.5em black, 0 0 0 1em white, inset 0 0 0 0.5em black, inset 0 0 0 1em white, 0 0 0 1.5em black, 0 0 0 2em white, inset 0 0 0 1.5em black, inset 0 0 0 2em white, 0 0 0 2.5em black, 0 0 0 3em white, inset 0 0 0 2.5em black, inset 0 0 0 3em white, 0 0 0 3.5em black, 0 0 0 4em white, inset 0 0 0 3.5em black, inset 0 0 0 4em white, 0 0 0 4.5em black, 0 0 0 5em white, inset 0 0 0 4.5em black, inset 0 0 0 5em white, 0 0 0 5.5em black, 0 0 0 6em white, inset 0 0 0 5.5em black, inset 0 0 0 6em white, 0 0 0 6.5em black, 0 0 0 7em white, inset 0 0 0 6.5em black, inset 0 0 0 7em white, 0 0 0 7.5em black, 0 0 0 8em white, inset 0 0 0 7.5em black, inset 0 0 0 8em white, 0 0 0 8.5em black, 0 0 0 9em white, inset 0 0 0 8.5em black, inset 0 0 0 9em white, 0 0 0 9.5em black, 0 0 0 10em white, inset 0 0 0 9.5em black, inset 0 0 0 10em white;
  }
}
​
Output 300px

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

Dismiss x
public
Bin info
thebabydinopro
0viewers