A Pen by CarterTsai.

box-shadow-example.markdown

box-shadow example

A Pen by CarterTsai on CodePen.

License.

index.html

<div class="spinftw">C</div>

style.scss

@import "compass";
.spinftw {
  background: #ccc;
  border-radius:10px;
  display:inline-block;
  height:30px;
  width:30px;
  position: absolute;
  top:100px;
  left: 300px;
  text-align:center;
  line-height:30px;

  animation:loader infinite 4s;  
  animation-duration: 2s;
  animation-name: change;
}

body {

}

@keyframes change {
  from {
    box-shadow:35px 35px #3498db,
    -35px 35px #9b59b6,
    -35px -35px #e74c3c,
    35px -35px #2ecc71;

    transform: rotate(0.5turn)
  }

  to {
    box-shadow:0px 0px #3498db,
    0px 0px #9b59b6,
    0px 0px #e74c3c,
    0px 0px #2ecc71;

    transform: rotate(0turn)
  }
}