Vertigo

by Chris Buttery

HTML

<div class="vertigo">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

body {
  background: #ce5a27;
  padding: 40px;
}

.vertigo {
  height: 300px;
  left: 50%;
  position: relative;
  top: 0;
  transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: 300px;
}

.vertigo span,
.vertigo span:before,
.vertigo span:after{
  border: 1px solid rgba(255,255,255,0.5);
  box-sizing: border-box;
  display: block;
  display: block;
  left: 50%;
  position: absolute;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.vertigo span:before,
.vertigo span:after{
  content: "";
}

.vertigo span:before {
  top: 10px;
}

.vertigo span:after {
  top: 20px;
}

.vertigo span:nth-child(1){
  border-radius: 150px;
  height: 300px;
  top: 0;
  width: 300px;
}

.vertigo span:nth-child(1):before{
  border-radius: 140px;
  height: 280px;
  width: 280px;
}

.vertigo span:nth-child(1):after{
  border-radius: 130px;
  height: 260px;
  width: 260px;
}

.vertigo span:nth-child(2){
  border-radius: 120px;
  height: 240px;
  top: 30px;
  width: 240px;
}

.vertigo span:nth-child(2):before{
  border-radius: 110px;
  height: 220px;
  width: 220px;
}

.vertigo span:nth-child(2):after{
  border-radius: 100px;
  height: 200px;
  width: 200px;
}

.vertigo span:nth-child(3){
  width: 180px;
  height: 180px;
  border-radius: 90px;
  top: 60px;
}

.vertigo span:nth-child(3):before{
  border-radius: 80px;
  height: 160px;
  width: 160px;
}

.vertigo span:nth-child(3):after{
  border-radius: 70px;
  height: 140px;
  width: 140px;
}

.vertigo span:nth-child(4){
  border-radius: 60px;
  height: 120px;
  top: 90px;
  width: 120px;
}

.vertigo span:nth-child(4):before{
  border-radius: 50px;
  height: 100px;
  width: 100px;
}

.vertigo span:nth-child(4):after{
  border-radius: 40px;
  height: 80px;
  width: 80px;
}

.vertigo span:nth-child(5){
  border-radius: 30px;
  height: 60px;
  top: 120px;
  width: 60px;
}

.vertigo span:nth-child(5):before{
  border-radius:...