Welcome to JS Bin

JS Bin

Save
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>Transforms (Window)</title>
</head>
<body>
  <div class="container">
    <div class="inner"></div>
  </div>
  
</body>
</html>
 
BODY {
  background: black;
  }
​
DIV {
  position: relative;
  height: 300px;
  width: 300px; 
  }
.container {
  margin: 1rem auto;
  background: url(http://img-fotki.yandex.ru/get/4210/yoksel.53/0_3b958_71cef6e0_L.jpg) center;
  border-radius: 50%;
  }
.inner {
  overflow: hidden;
  border-radius: 50%;
  }
.inner:before,
.inner:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px; 
  box-shadow: 0 0 0 150px black inset;
  animation: 5s round-window infinite;
}
.inner:after {
  transform: rotate(45deg);
  }
.container:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 3;
  top: -2px;
  left: -2px;
  height: 296px;
  width: 296px; 
  border-radius: 50%;
  border: 4px solid black;
  }
​
@keyframes round-window {
  50% {
    box-shadow: 0 0 0 0 #000 inset;
  }
}
Output

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

Dismiss x